animate contact
This commit is contained in:
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
@@ -0,0 +1,75 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="90.390999"
|
||||
height="87.431"
|
||||
viewBox="0 0 23.915951 23.132786"
|
||||
version="1.1"
|
||||
id="svg1109"
|
||||
inkscape:version="0.92.4 5da689c313, 2019-01-14"
|
||||
sodipodi:docname="contact.svg">
|
||||
<defs
|
||||
id="defs1103" />
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="0.35"
|
||||
inkscape:cx="-105.71429"
|
||||
inkscape:cy="560"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false"
|
||||
units="px"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1006"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1" />
|
||||
<metadata
|
||||
id="metadata1106">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Calque 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(0,-273.86719)">
|
||||
<path
|
||||
sodipodi:type="star"
|
||||
style="display:inline;opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.16906723;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="path2518"
|
||||
sodipodi:sides="5"
|
||||
sodipodi:cx="485.86176"
|
||||
sodipodi:cy="23.111385"
|
||||
sodipodi:r1="11.974361"
|
||||
sodipodi:r2="11.974361"
|
||||
sodipodi:arg1="0.78539816"
|
||||
sodipodi:arg2="1.4137167"
|
||||
inkscape:flatsided="false"
|
||||
inkscape:rounded="0"
|
||||
inkscape:randomized="0"
|
||||
d="m 494.32891,31.578537 -6.59395,3.359786 -7.30945,-1.157703 -5.23299,-5.232988 -1.1577,-7.309449 3.35978,-6.59395 6.59395,-3.359785 7.30945,1.157703 5.23299,5.232988 1.1577,7.309449 z"
|
||||
inkscape:transform-center-x="-3.8790373e-06"
|
||||
transform="rotate(30.000001,-240.59015,-730.04399)" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
@@ -15,6 +15,7 @@ function masonry() {
|
||||
itemSelector: '.img-card',
|
||||
columnWidth: '.img-card',
|
||||
percentPosition: true,
|
||||
gutter: 20,
|
||||
transitionDuration: '0.2s'
|
||||
});
|
||||
|
||||
@@ -72,13 +73,31 @@ function contact() {
|
||||
var $contact = $('header .contact');
|
||||
|
||||
$contact.on('click',function() {
|
||||
|
||||
if ($(this).hasClass('open')) {
|
||||
$(this).removeClass('open');
|
||||
$(this).addClass('close');
|
||||
} else {
|
||||
$(this).addClass('open');
|
||||
$(this).removeClass('close');
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//
|
||||
// function transitionpage() {
|
||||
// var $a = $('a');
|
||||
// var $all = $('body *');
|
||||
//
|
||||
// $a.on('click', function() {
|
||||
// $all.css('display':'none');
|
||||
// })
|
||||
//
|
||||
// }
|
||||
|
||||
jQuery(document).ready(function($){
|
||||
masonry();
|
||||
contact();
|
||||
transitionpage();
|
||||
// card();
|
||||
// ajax();
|
||||
// isotype();
|
||||
|
||||
@@ -29,3 +29,40 @@
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes translateright{
|
||||
0%{
|
||||
right: -50px;
|
||||
color: transparent;
|
||||
display: none;
|
||||
}
|
||||
|
||||
30%{
|
||||
right: 150px;
|
||||
color: transparent;
|
||||
display: block;
|
||||
}
|
||||
|
||||
100%{
|
||||
right: 200px;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes translateleft{
|
||||
0%{
|
||||
right: 200px;
|
||||
color: white;
|
||||
display: block;
|
||||
}
|
||||
30%{
|
||||
right: 150px;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
100%{
|
||||
right: -200px;
|
||||
color: transparent;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -36,8 +36,6 @@ header{
|
||||
h3{
|
||||
text-transform: lowercase;
|
||||
color:white;
|
||||
margin-top:-52px;
|
||||
margin-left: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,7 +7,7 @@ header{
|
||||
z-index: 9999;
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 40px;
|
||||
right: 2%;
|
||||
transform: scale(1);
|
||||
transition: transform 0.5s ease;
|
||||
cursor: pointer;
|
||||
@@ -15,16 +15,59 @@ header{
|
||||
transition: transform 0.5s ease;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
svg{
|
||||
&.open{
|
||||
transform: scale(15);
|
||||
transition: transform 0.5s ease;
|
||||
h3{
|
||||
color: transparent;
|
||||
transition: visibility 0.5 ease;
|
||||
}
|
||||
img{
|
||||
animation: rotation 12s infinite linear;
|
||||
}
|
||||
& + .txt{
|
||||
position: fixed;
|
||||
top: 190px;
|
||||
text-align: center;
|
||||
line-height: 1.5rem;
|
||||
z-index: 9999;
|
||||
animation: translateright 1s ease forwards;
|
||||
}
|
||||
}
|
||||
&.close{
|
||||
transform: scale(1);
|
||||
transition: transform 0.5s 0.1s ease;
|
||||
& + .txt{
|
||||
position: fixed;
|
||||
top: 190px;
|
||||
text-align: center;
|
||||
line-height: 1.5rem;
|
||||
z-index: 9999;
|
||||
animation: translateleft 1s ease forwards;
|
||||
}
|
||||
h3{
|
||||
color: white;
|
||||
transition: color 0.5s 0.4s ease;
|
||||
}
|
||||
&:hover{
|
||||
transition: transform 0.5s ease!important;
|
||||
transform: scale(0.9)!important;
|
||||
}
|
||||
}
|
||||
img{
|
||||
animation: rotation 6s infinite linear;
|
||||
width: 90.4px;
|
||||
height: 87.45px;
|
||||
}
|
||||
h3{
|
||||
transform: rotate(35deg);
|
||||
position: absolute;
|
||||
top: 33px;
|
||||
left: 20px;
|
||||
}
|
||||
p{
|
||||
display: none;
|
||||
& + .txt{
|
||||
position: fixed;
|
||||
right: -200px;
|
||||
p{
|
||||
}
|
||||
}
|
||||
}
|
||||
h2{
|
||||
|
||||
@@ -4,13 +4,8 @@ body{
|
||||
border-top: 1px solid black;
|
||||
padding-top: 20px;
|
||||
.img-card{
|
||||
width: 50%;
|
||||
&:nth-child(odd){
|
||||
padding-right: 10px;
|
||||
}
|
||||
&:nth-child(even){
|
||||
padding-left: 10px;
|
||||
}
|
||||
width: 49%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.header-item{
|
||||
position: relative;
|
||||
@@ -28,11 +23,8 @@ body{
|
||||
}
|
||||
}
|
||||
.content{
|
||||
width: calc((100% / 3) * 2);
|
||||
width: calc(100% / 3);
|
||||
margin: 20px 0;
|
||||
.txt{
|
||||
column-count: 2;
|
||||
}
|
||||
}
|
||||
.prev-next{
|
||||
width: calc(100% / 3);
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
{% block content %}
|
||||
<h3>{{page.title}}</h3>
|
||||
<div class="txt">
|
||||
{{ page.content|raw }}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
@@ -42,27 +42,10 @@
|
||||
<h2>{{site.header.status|upper}}</h2></a>
|
||||
</nav>
|
||||
<div class="contact">
|
||||
<svg>
|
||||
<path
|
||||
transform="matrix(3.2731668,1.8897638,-1.8897638,3.2731668,-1501.4361,-950.09606)"
|
||||
inkscape:transform-center-x="-3.8790373e-06"
|
||||
d="m 494.32891,31.578537 -6.59395,3.359786 -7.30945,-1.157703 -5.23299,-5.232988 -1.1577,-7.309449 3.35978,-6.59395 6.59395,-3.359785 7.30945,1.157703 5.23299,5.232988 1.1577,7.309449 z"
|
||||
inkscape:randomized="0"
|
||||
inkscape:rounded="0"
|
||||
inkscape:flatsided="false"
|
||||
sodipodi:arg2="1.4137167"
|
||||
sodipodi:arg1="0.78539816"
|
||||
sodipodi:r2="11.974361"
|
||||
sodipodi:r1="11.974361"
|
||||
sodipodi:cy="23.111385"
|
||||
sodipodi:cx="485.86176"
|
||||
sodipodi:sides="5"
|
||||
style="display:inline;opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.16906723;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
sodipodi:type="star"/>
|
||||
</svg>
|
||||
|
||||
{% include 'partials/navigation.html.twig' %}
|
||||
<img src="user/themes/gilles_acezat/images/contact.svg" alt="">
|
||||
<h3>Contact</h3>
|
||||
</div>
|
||||
{% include 'partials/navigation.html.twig' %}
|
||||
</section>
|
||||
<section class="works works-mea">
|
||||
{% for child in collection %}
|
||||
|
||||
Reference in New Issue
Block a user