mirror of
https://github.com/ConjureETS/Site.git
synced 2026-03-24 01:30:58 +00:00
Continuation Section Activités
Correction de l'animation de slide-in/slide-out
This commit is contained in:
Massimo Di Lullo
parent
a9a0760f71
commit
a76fbeaab4
2
public/css/main.min.css
vendored
2
public/css/main.min.css
vendored
File diff suppressed because one or more lines are too long
2
public/js/main.min.js
vendored
2
public/js/main.min.js
vendored
@ -1 +1 @@
|
||||
function addCopyrightCurrentDate(){document.querySelector("footer").querySelector("p").innerHTML+=" "+(new Date).getFullYear()}function showActivityContent(e){e.target.parentElement.parentElement.querySelector(".headline").classList.toggle("toggle-visibility"),e.target.parentElement.parentElement.querySelector(".content").classList.toggle("slide"),e.target.parentElement.parentElement.querySelector(".bg-img").classList.toggle("slide")}addCopyrightCurrentDate(),document.querySelectorAll("section#activites button").forEach(function(e){e.addEventListener("click",showActivityContent)});
|
||||
function addCopyrightCurrentDate(){document.querySelector("footer").querySelector("p").innerHTML+=" "+(new Date).getFullYear()}function showActivityContent(e){e.target.parentElement.parentElement.querySelector(".headline").classList.toggle("toggle-visibility"),e.target.parentElement.parentElement.classList.toggle("slide")}addCopyrightCurrentDate(),document.querySelectorAll("section#activites button").forEach(function(e){e.addEventListener("click",showActivityContent)});
|
||||
@ -12,6 +12,5 @@ function addCopyrightCurrentDate() {
|
||||
|
||||
function showActivityContent(e) {
|
||||
e.target.parentElement.parentElement.querySelector('.headline').classList.toggle('toggle-visibility');
|
||||
e.target.parentElement.parentElement.querySelector('.content').classList.toggle('slide');
|
||||
e.target.parentElement.parentElement.querySelector('.bg-img').classList.toggle('slide');
|
||||
e.target.parentElement.parentElement.classList.toggle('slide');
|
||||
}
|
||||
@ -35,7 +35,7 @@ header.logo-container {
|
||||
|
||||
section {
|
||||
h2 {
|
||||
font-size: 3.5rem;
|
||||
font-size: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -73,67 +73,68 @@ section#activites {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
div {
|
||||
.sub-section {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
div:nth-of-type(2) {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
div.content {
|
||||
position: absolute;
|
||||
padding: 25px;
|
||||
transition: all 2s;
|
||||
|
||||
&.slide {
|
||||
&:not(.animation-inversed) {
|
||||
transform: translateX(40%);
|
||||
}
|
||||
|
||||
&.animation-inversed {
|
||||
transform: translateX(-40%);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.animation-inversed) {
|
||||
left: -40%;
|
||||
div.content {
|
||||
left: -40%;
|
||||
}
|
||||
}
|
||||
|
||||
&.animation-inversed {
|
||||
right: - 40%;
|
||||
}
|
||||
}
|
||||
|
||||
div.content.slide, div.bg-img.slide {
|
||||
&:not(.animation-inversed) {
|
||||
transform: translateX(40%);
|
||||
div.content {
|
||||
right: - 40%;
|
||||
}
|
||||
}
|
||||
|
||||
&.animation-inversed {
|
||||
transform: translateX(-40%);
|
||||
}
|
||||
}
|
||||
|
||||
div.headline {
|
||||
margin-top: 50px;
|
||||
padding: 25px;
|
||||
transition: all 0.25s;
|
||||
position: absolute;
|
||||
|
||||
&:not(.is-headline-inversed) {
|
||||
left: 50px;
|
||||
div.content {
|
||||
position: absolute;
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
&.is-headline-inversed {
|
||||
right: 100px;
|
||||
}
|
||||
}
|
||||
div.headline {
|
||||
margin-top: 75px;
|
||||
padding: 25px;
|
||||
transition: all 0.25s;
|
||||
position: absolute;
|
||||
color: white;
|
||||
|
||||
div.headline.toggle-visibility {
|
||||
display: none;
|
||||
}
|
||||
&:not(.is-headline-inversed) {
|
||||
left: 50px;
|
||||
}
|
||||
|
||||
div.bg-img {
|
||||
position: absolute;
|
||||
transition: all 2s;
|
||||
|
||||
&.gala-img {
|
||||
background-image: url('../img/gala.jpg');
|
||||
&.is-headline-inversed {
|
||||
right: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
&.mtlgj-img {
|
||||
background-image: url('../img/mtlgj.jpg');
|
||||
div.headline.toggle-visibility {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bg-img {
|
||||
position: absolute;
|
||||
transition: all 2s;
|
||||
|
||||
&.gala-img {
|
||||
background-image: url('../img/gala.jpg');
|
||||
}
|
||||
|
||||
&.mtlgj-img {
|
||||
background-image: url('../img/mtlgj.jpg');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,22 +1,26 @@
|
||||
@media only screen and (max-width: 1028px) {
|
||||
section#activites {
|
||||
div.content {
|
||||
.sub-section {
|
||||
&.slide {
|
||||
&:not(.animation-inversed) {
|
||||
transform: translateX(50%);
|
||||
}
|
||||
|
||||
&.animation-inversed {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.animation-inversed) {
|
||||
left: -50%;
|
||||
div.content {
|
||||
left: -50%;
|
||||
}
|
||||
}
|
||||
|
||||
&.animation-inversed {
|
||||
right: -50%;
|
||||
}
|
||||
}
|
||||
|
||||
div.content.slide-in, div.bg-img.slide-out {
|
||||
&:not(.animation-inversed) {
|
||||
transform: translateX(50%);
|
||||
}
|
||||
|
||||
&.animation-inversed {
|
||||
transform: translateX(-50%);
|
||||
div.content {
|
||||
right: -50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -24,23 +28,27 @@
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
section#activites {
|
||||
div.content {
|
||||
.sub-section {
|
||||
&.slide {
|
||||
&:not(.animation-inversed) {
|
||||
transform: translateX(75%);
|
||||
}
|
||||
|
||||
&.animation-inversed {
|
||||
transform: translateX(-75%);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.animation-inversed) {
|
||||
left: -75%;
|
||||
div.content {
|
||||
left: -75%;
|
||||
}
|
||||
}
|
||||
|
||||
&.animation-inversed {
|
||||
right: -75%;
|
||||
}
|
||||
}
|
||||
|
||||
div.content.slide-in, div.bg-img.slide-out {
|
||||
&:not(.animation-inversed) {
|
||||
transform: translateX(75%);
|
||||
}
|
||||
|
||||
&.animation-inversed {
|
||||
transform: translateX(-75%);
|
||||
div.content {
|
||||
right: -75%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -56,9 +56,9 @@
|
||||
</section>
|
||||
<section class="section" id="apropos"></section>
|
||||
<section class="section" id="activites">
|
||||
<div class="full-height full-width is-full">
|
||||
<div class="full-height full-width columns is-full sub-section">
|
||||
<div class="bg-img gala-img full-height full-width"></div>
|
||||
<div class="content is-two-fifths-desktop is-half-tablet is-three-quarters-mobile full-height">
|
||||
<div class="content column is-two-fifths-desktop is-half-tablet is-three-quarters-mobile full-height">
|
||||
<p></p>
|
||||
<button class="button is-info is-outlined is-medium">Fermer</button>
|
||||
</div>
|
||||
@ -68,14 +68,14 @@
|
||||
<button class="button is-info is-outlined is-medium">En savoir plus</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="full-height full-width is-full">
|
||||
<div class="bg-img mtlgj-img animation-inversed full-height full-width"></div>
|
||||
<div class="full-height full-width is-full columns animation-inversed sub-section">
|
||||
<div class="bg-img mtlgj-img full-height full-width"></div>
|
||||
<div class="headline is-headline-inversed">
|
||||
<h2>Montréal Game Jam</h2>
|
||||
<p></p>
|
||||
<button class="button is-info is-outlined is-medium">En savoir plus</button>
|
||||
</div>
|
||||
<div class="content animation-inversed is-two-fifths-desktop is-half-tablet is-three-quarters-mobile full-height">
|
||||
<div class="content column is-two-fifths-desktop is-half-tablet is-three-quarters-mobile full-height">
|
||||
<p></p>
|
||||
<button class="button is-info is-outlined is-medium">Fermer</button>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user