CSS next & previous clip path animation - javascript

Following on from a related question that I posted last week, I have created a custom carousel that uses clip-path to provide a snippet of the next and previous slides. This is currently working functionally, but I now need to apply some animations when showing/hiding the slides.
In the related question, only the "next slide" functionality was needed, and a solution that was provided was to clip the "active" slide. However now since we need to do next and previous slides, I have applied the clip to the next and previous slides instead. Code as follows:
$(document).ready(function() {
$('.slide').click(function() {
var current = $(this);
var prev = current.prev('.slide');
var next = current.next('.slide');
$('.slide').removeClass('active next prev');
if (current.hasClass('prev')) {
current.addClass('active').removeClass('prev');
} else {
current.addClass('active').removeClass('next');
}
if (prev.length) {
prev.addClass('prev');
} else {
$('.slide:last').addClass('prev');
}
if (next.length) {
next.addClass('next');
} else {
$('.slide:first').addClass('next');
}
});
});
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
width: 100%;
}
.banners {
position: relative;
background: #000;
width: 100%;
height: 100%;
overflow: hidden;
margin: 0 auto;
}
.slide {
display: block;
height: 100%;
width: 100%;
position: absolute;
overflow: hidden;
text-align: center;
z-index: 1;
}
.slide.active {
z-index: 2;
}
.slide.next {
clip-path: polygon(100% 100%, 55% 100%, 100% 67%);
}
.slide.prev {
clip-path: polygon(44% 0, 0 30%, 0 0);
}
.slide.next,
.slide.prev {
z-index: 3;
cursor: pointer;
}
.slide .image {
height: 100%;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: relative;
}
.content {
color: #FFF;
display: inline-block;
vertical-align: middle;
font-family: arial;
text-transform: uppercase;
font-size: 24px;
}
.spanner {
vertical-align: middle;
width: 0;
height: 100%;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="banners">
<div class="slide active">
<div class="image" style="background-image: url('http://imageshack.com/a/img924/2127/SNvipw.jpg');">
<div class="content">
Slide 1
</div>
<div class="spanner"></div>
</div>
</div>
<div class="slide next">
<div class="image" style="background-image: url('http://imageshack.com/a/img922/6240/GzBaZq.jpg');">
<div class="content">
Slide 2
</div>
<div class="spanner"></div>
</div>
</div>
<div class="slide prev">
<div class="image" style="background-image: url('http://imageshack.com/a/img924/227/XRZGsI.jpg');">
<div class="content">
Slide 3
</div>
<div class="spanner"></div>
</div>
</div>
</div>
Here is a JSFiddle of all the above code: https://jsfiddle.net/795f88nm/
As you will see the carousel works fine. I just need to add in animations, as follows:
When clicking the next slide (bottom right corner) it should gradually reveal the slide upwards. The "new" next slide should gradually appear from the bottom corner.
When clicking the previous slide (top left corner) it should gradually reveal the slide downwards. The "new" previous slide should gradually appear from the top corner.
I'm not very good at doing animations, so could do with some help on this.


Basically you can use animation with your clip-path
$(document).ready(function() {
$('.slide').click(function() {
var current = $('.slide.active');
var prev = $('.slide.prev');
var next = $('.slide.next');
if ($(this).hasClass('prev')) {
prev.removeClass('prev').addClass('next');
current.removeClass('active').addClass('prev');
next.removeClass('next').addClass('active');
} else if ($(this).hasClass('next')) {
next.removeClass('next').addClass('prev');
current.removeClass('active').addClass('next');
prev.removeClass('prev').addClass('active');
}
});
});
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
width: 100%;
}
.banners {
position: relative;
background: #000;
width: 100%;
height: 100%;
overflow: hidden;
margin: 0 auto;
}
.slide {
display: block;
height: 100%;
width: 100%;
position: absolute;
overflow: hidden;
text-align: center;
z-index: 1;
}
.slide.active {
z-index: 2;
transition: all 2s ease;
}
.slide.next {
transition: all 2s ease;
clip-path: polygon(100% 100%, 55% 100%, 100% 67%);
animation: polygons_next 2s alternate;
}
.slide.prev {
transition: all 2s ease;
clip-path: polygon(44% 0, 0 30%, 0 0);
animation: polygons_prev 2s alternate;
}
#keyframes polygons_next {
0% {
clip-path: polygon(100% 100%, 100% 100%, 100% 100%);
}
100% {
clip-path: polygon(100% 100%, 55% 100%, 100% 67%);
}
}
#keyframes polygons_prev {
0% {
clip-path: polygon(100% 0, 0 100%, 0 0);
}
100% {
clip-path: polygon(44% 0, 0 30%, 0 0);
}
}
.slide.next,
.slide.prev {
z-index: 3;
cursor: pointer;
}
.slide .image {
height: 100%;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: relative;
}
.content {
color: #FFF;
display: inline-block;
vertical-align: middle;
font-family: arial;
text-transform: uppercase;
font-size: 24px;
}
.spanner {
vertical-align: middle;
width: 0;
height: 100%;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="banners">
<div class="slide prev">
<div class="image" style="background-image: url('http://imageshack.com/a/img924/2127/SNvipw.jpg');">
<div class="content">
Slide 1
</div>
<div class="spanner"></div>
</div>
</div>
<div class="slide active">
<div class="image" style="background-image: url('http://imageshack.com/a/img922/6240/GzBaZq.jpg');">
<div class="content">
Slide 2
</div>
<div class="spanner"></div>
</div>
</div>
<div class="slide next">
<div class="image" style="background-image: url('http://imageshack.com/a/img924/227/XRZGsI.jpg');">
<div class="content">
Slide 3
</div>
<div class="spanner"></div>
</div>
</div>
</div>

Related

How do you add a certain time point to stop an animation using HTML and CSS

I don't know how to stop my text ('TK') from stopping at a certain time so it can go to the next page. The next page is Hiyo
$(window).on('load', function() {
$(".loader").fadeOut(1000);
$(".content").fadeIn(1000);
})
body {
margin: 0;
padding: 0;
/*Background of page
background: #000000; */
/*Page font*/
font-family: arial;
}
.loader
/*Position of 'TK' on screen */
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.loader h1 {
margin: 0;
padding: 0;
text-transform: uppercase;
font-size: 12em;
color: rgb(255, 255, 255);
background-image: url(image.jpg);
background-repeat: repeat-x;
-webkit-background-clip: text;
animation: animate 65s
}
#keyframes animate {
0% {
background-position: left 0px top 0px;
}
40% {
background-position: left 800px top -50px;
}
80% {
background-position: left 1800px top -20px;
}
0% {
background-position: left 3000px top 101px;
}
}
.content {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="loader">
<h1 style="color:rgba(0, 0, 0, 0.993)">TK</h1>
<div class="container">
<p class="text">Hiyo</p>
</div>
</div>
Image I used
https://www.bing.com/images/search?view=detailV2&insightstoken=bcid_T6TUOdcPQi4FzA*ccid_pNQ51w9C&form=SBIIDP&iss=SBIUPLOADGET&sbisrc=ImgDropper&idpbck=1&sbifsz=346+x+435+%c2%b7+3.14+kB+%c2%b7+jpeg&sbifnm=blob.jpg&thw=346&thh=435&ptime=46&dlen=4288&expw=346&exph=435&selectedindex=0&id=-1591937342&ccid=pNQ51w9C&vt=2&sim=1
I've tried using #keyframes to stop it but nothin

How do I make the menu go to the side and show text to the right of it?

Kinda like this:
Design picture
I've gotten the code for the menu in the right format.
I've tried to get the code to make an animation to the right. Although, it doesn't work the way I want it to.
Here's the code I have written thus far:
HTML:
> <link rel="stylesheet" href="index.css"> <link rel="stylesheet"
> href="jason.js"> <div id="menu">
> <div id="menu-items">
> About
> Team
> Contact us
>
> </div>
> <div id="menu-background-pattern"></div>
> <div id="menu-background-image"></div> </div>
CSS:
body {
background-color: rgb(20, 20, 20);
margin: 0px; }
/* Menu items */
#menu {
height: 100vh;
display: flex;
align-items: center; }
.menu-item {
color: white;
font-size: clamp(3rem, 8vw, 8rem);
font-family: "Ibarra Real Nova", serif;
display: block;
text-decoration: none;
padding: clamp(0.25rem, 0.5vw, 1rem) 0rem;
transition: opacicity 400ms ease; }
#menu-items {
margin-left: clamp(4rem, 20vw, 48rem);
position: relative;
z-index: 2; }
#menu-items:hover > .menu-item {
opacity: 0.3; }
#menu-items:hover > .menu-item:hover {
opacity: 1; }
/* Background pattern */
#menu-items:hover ~ #menu-background-pattern {
background-size: 11vmin 11vmin;
opacity: 0.5; }
#menu[data-active-index="0"] > #menu-background-pattern {
background-position: 0% -25%; }
#menu[data-active-index="1"] > #menu-background-pattern {
background-position: 0% -50%; }
#menu[data-active-index="2"] > #menu-background-pattern {
background-position: 0% -75%; }
#menu[data-active-index="3"] > #menu-background-pattern {
background-position: 0% -100%; }
#menu[data-active-index="0"] > #menu-background-image {
background-position: 0% 45%; }
#menu[data-active-index="1"] > #menu-background-image {
background-position: 0% 50%; }
#menu[data-active-index="2"] > #menu-background-image {
background-position: 0% 55%; }
#menu[data-active-index="3"] > #menu-background-image {
background-position: 0% 60%; }
#menu-background-image {
height: 100%;
width: 100%;
background-image: url('logo.png');
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
background-position: center 40%;
background-size: 110vmax;
opacity: 0.15;
transition: opacity 800ms ease,
background-size 800ms ease,
background-position 800ms ease; }
#menu-items:hover ~ #menu-background-image {
background-size: 100vmax;
opacity: 0.10; }
JS:
const menu = document.getElementById("menu")
Array.from(document.getElementsByClassName("menu-item"))
.forEach((items, index) => {
items.onmouseover = () => {
menu.dataset.activeIndex = index;
}
});
I've been unable to get the menu to slide to the side. And make room for the text to the right without it ruining the zooming in animation and background animation.
The idea is for it to keep being zoomed out the same way whilst showing the text.

Here is the solution how to create a drawer with a multi page system using vanilla HTML, CSS & JavaScript
1. First create a HTML file named index.html
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet">
</head>
<body>
<section id="root" class="page">
<input type="button" value="Menu" onclick="onMenu()">
</section>
<section id="about" class="page">
<h1>About</h1>
<input type="button" value="Menu" onclick="onMenu()">
</section>
<section id="team" class="page">
<h1>Team</h1>
<input type="button" value="Menu" onclick="onMenu()">
</section>
<section id="contact" class="page">
<h1>Contact us</h1>
<input type="button" value="Menu" onclick="onMenu()">
</section>
<div id="menu">
<div id="close">
<input type="button" value="×" id="close-btn">
</div>
Home
About
Team
Contact us
</div>
<script src="app.js" type="text/javascript"></script>
</body>
</html>
2. Second create a CSS file named main.css
body {
margin: 0 auto;
padding: 0;
}
#root {
z-index: 1;
}
.page {
display: grid;
justify-items: center;
align-content: center;
width: 100vw;
height: 100vh;
background-color: #FFFFFF;
position: absolute;
overflow-x: hidden;
overflow-y: scroll;
}
section:target {
opacity: 1;
z-index: 1;
}
#menu {
display: none;
justify-items: center;
align-content: flex-start;
box-sizing: border-box;
position: fixed;
top: 0;
left: 0;
z-index: 1;
width: 75vw;
height: 100vh;
background-color: #333333AA;
}
.menu-btn {
margin: 1em 0 1em 0;
text-decoration: none;
color: #FFFFFF;
}
#close {
display: flex;
justify-content: center;
align-items: center;
width: inherit;
height: 10vh;
}
#close::before {
content: "";
width: 70vw;
}
#close-btn {
border: 0;
width: 25vw;
height: 10vh;
font-size: 64px;
color: #FFF;
background-color: transparent;
}
#keyframes slideRight {
from {
width: 0;
opacity: 0;
}
to {
width: 70vw;
opacity: 1;
}
}
#keyframes slideLeft {
from {
width: 70vw;
opacity: 1;
}
to {
width: 0;
opacity: 0;
}
}
3. Finally create sa JS file named app.js
let menu = document.querySelector("#menu");
let close_btn = document.querySelector("#close-btn");
let onMenu = () => {
menu.style.display = "grid";
menu.style.animationName = "slideRight";
menu.style.animationDuration = "0.5s";
};
close_btn.addEventListener("click", () => {
menu.style.animationName = "slideLeft";
menu.style.animationDuration = "0.5s";
setTimeout(() => {
menu.style.display = "none";
}, 400);
});

JS: How to get multiple cards to flip on website?

Hi so I found this card flip animation https://codepen.io/desandro/pen/LmWozd and I decided to style it for my website. I intend to have a bunch of these cards (1 for each letter of the alphabet). However right now the code does not work for more than one card. I am not too familiar with JavaScript so I can't figure out why this code does not work. I have tried a few methods I found online but none of them seem to work either but they also didn't quiet apply to card flipping so I guess that might be part of the issue. Any help is appreciated!
Here's my code:
var card = document.querySelector('.card');
card.addEventListener( 'click', function() {
card.classList.toggle('is-flipped');
});
.scene {
width: 120px;
height: 100px;
margin: 40px 0;
perspective: 600px;
border-radius: 25px;
}
.card {
position: relative;
width: 100%;
height: 100%;
cursor: pointer;
transform-style: preserve-3d;
transform-origin: center right;
transition: transform 1s;
border-radius: 25px;
}
.card.is-flipped {
transform: translateX(-100%) rotateY(-180deg);
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
line-height: 200%;
color: white;
text-align: center;
font-weight: bold;
font-size: 40px;
backface-visibility: hidden;
border-radius: 25px;
}
.card__face--front {
background: #C1C6C4;
}
.card__face--back {
background-size: contain;
background-repeat: no-repeat;
transform: rotateY(180deg);
}
<div class="scene scene--card">
<div class="card" id="card-1">
<div class="card__face card__face--front" style="background: #FFA894 !important;">A</div>
<div class="card__face card__face--back" style="background-color: red"></div>
</div>
</div>
<div class="scene scene--card">
<div class="card" id="card-2">
<div class="card__face card__face--front" style="background: #FFA894 !important;">A</div>
<div class="card__face card__face--back" style="background-color: red">
</div>
<!-- color is a placeholder -->
</div>
</div>

Use querySelectorAll and a loop. querySelector returns the first element in hierarchical order. querySelectorAll returns an array of selected elements
var cards = document.querySelectorAll('.card');
for(let i = 0; i < cards.length; i++){
cards[i].addEventListener( 'click', function() {
cards[i].classList.toggle('is-flipped');
});
}
.scene {
width: 120px;
height: 100px;
margin: 40px 0;
perspective: 600px;
border-radius: 25px;
}
.card {
position: relative;
width: 100%;
height: 100%;
cursor: pointer;
transform-style: preserve-3d;
transform-origin: center right;
transition: transform 1s;
border-radius: 25px;
}
.card.is-flipped {
transform: translateX(-100%) rotateY(-180deg);
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
line-height: 200%;
color: white;
text-align: center;
font-weight: bold;
font-size: 40px;
backface-visibility: hidden;
border-radius: 25px;
}
.card__face--front {
background: #C1C6C4;
}
.card__face--back {
background-size: contain;
background-repeat: no-repeat;
transform: rotateY(180deg);
}
<div class="scene scene--card">
<div class="card" id="card-1">
<div class="card__face card__face--front" style="background: #FFA894 !important;">A</div>
<div class="card__face card__face--back" style="background-color: red"></div>
</div>
</div>
<div class="scene scene--card">
<div class="card" id="card-2">
<div class="card__face card__face--front" style="background: #FFA894 !important;">A</div>
<div class="card__face card__face--back" style="background-color: red">
</div>
<!-- color is a placeholder -->
</div>
</div>

Why the last section covers the above sections

I am trying to create the full-page parallax scroll in the one-page website. There are 5 sections in the page. When I add the code of parallax scrolling, the last section covers the above sections. I am not sure where is the mistake.
And, I guess the js/jQuery code in my work does not work since the effects do not come out on the menu.
Any help is appreciated. Thank you so much.
$(document).ready(function() {
let hamburgerClicked = fales;
$('#toggle').on("click", function() {
if (hamburgerClicked == false) {
$(".top").css('transform', 'translate (11px) translateX(0) rotate(45deg)');
$(".bottom").css('transform', 'translateY(-11px) translateX(0) rotate(-45deg)');
hamburgerClicked = true;
} else {
$(".top").css('transform', 'translate (0px) translateX(0) rotate(0deg)');
$(".bottom").css('transform', 'translateY (0px) translateX(0) rotate(0deg)');
hamburgerClicked = false;
}
$("#overlay").toggleClass('active');
$('#overlay').toggleClass('open');
});
});
html {
height: 100%;
}
body {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 200;
font-size: 15px;
color: #fff;
background-image: url(../img/background/background.png);
background-attachment: fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
#meteor-shower {
position: absolute;
top: 0;
left: 0;
}
.background {
overflow: hidden;
will-change: transform;
backface-visibility: hidden;
height: 100vh 30vh;
position: fixed;
width: 100%;
transform: translateY(30vh);
transition-timing-function: .2s all, cubic-bezier(0.22, 0.44, 0, 1);
}
.background:first-child {
transform: translateY(-30vh / 2);
}
.content-wrapper {
transform: translateY(30vh /2);
}
section {
width: 100%;
transform: translateY(40vh);
will-change: transform;
backface-visibility: hidden;
transition-timing-function: 1.2s +.5, all, cubic-bezier(0.22, 0.44, 0.1);
text-decoration: none;
scroll-behavior: smooth;
}
/*-------------------------------background-animation---------------------------------------*/
.twinkling {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 95%;
display: block;
}
.twinkling {
position: absolute;
background: transparent url(../img/background/2446101-03.png) repeat top center;
background-color: rgba(0, 0, 0, 0);
background-size: cover;
background-repeat: no-repeat;
z-index: 1;
-webkit-animation: move-twink-back 16s infinite;
animation: move-twink-back 16s infinite;
}
#keyframes move-twink-back {
from {
background-position: 0 0;
}
to {
background-position: -10000px 5000px;
}
}
#-webkit-keyframes move-twink-back {
from {
background-position: 0 0;
}
to {
background-position: -10000px 5000px;
}
}
/*----------------------------------------navbar---------------------------------------------*/
/*-------------header-container-------------*/
header {
height: 3em;
position: fixed;
}
.header-container {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
.header-container h1 {
font-family: 'Gabriela', serif;
font-size: 1.5em;
float: left;
padding-top: 5px;
padding-left: 20px;
display: block;
}
/*-------------------menu-------------------*/
.button-container {
position: fixed;
top: 5%;
right: 2%;
height: 27px;
width: 35px;
cursor: pointer;
z-index: 100;
transition: opacity .25s ease;
opacity: 1;
content: "";
}
.button-container:hover {
opacity: .7;
}
.top:active {
transform: translate(11px) translateX(0) rotate(45deg);
}
.middle:active {
opacity: 0;
}
.bottom:active {
transform: translateY(-11px) translateX(0) rotate(-45deg);
}
span {
background: #fff;
border: none;
height: 4px;
width: 32px;
position: absolute;
top: 0;
left: 0;
transition: all .35s ease;
cursor: pointer;
border-radius: 3px;
}
.middle {
top: 10px;
}
.bottom {
top: 20px;
}
.overlay {
z-index: 500;
position: fixed;
background: rgba(0, 0, 0, 0.6);
top: 0;
left: 0;
width: 5%;
height: 0%;
opacity: .6;
visibility: hidden;
transition: opacity .35s, visibility .35s, height .35s;
}
li {
animation: fadeInRight .5s ease forwards;
animation-delay: .35s;
}
li:nth-of-type(2) {
animation-delay: .4s;
}
li:nth-of-type(3) {
animation-delay: .45s;
}
li:nth-of-type(4) {
animation-delay: .50s;
}
nav {
position: relative;
height: 70%;
top: 20%;
transform: translateY(-50%);
font-size: 0.8em;
}
ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
li {
display: block;
height: 25%;
min-height: 50px;
position: relative;
opacity: 0;
}
a {
display: block;
position: relative;
text-decoration: none;
overflow: hidden;
}
a:hover {
transform: scale(1);
}
a:hover:after,
a:focus:after,
a:active:after {
width: 30%;
}
a:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
transform: translateX(-50%);
height: 3px;
background: rgba(0, 0, 0, 0.6);
transition: .35s;
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
.active {
visibility: visible;
}
/*---------------------------------------section-1-------------------------------------------*/
#section1 {
background: rgba(0, 0, 0, 0);
height: 100vh;
}
#section1 {
:nth-child(1) {
padding-top: 0px;
display: flex;
}
}
/*------------crystal-animation-------------*/
#crstal-animation {
overflow: hidden;
display: block;
}
.crystal {
width: 23%;
position: absolute;
top: 18%;
left: 40%;
margin: 0;
margin-right: -50%;
transform-style: preserve-3d;
-webkit-animation: rotation 8s infinite linear;
animation: rotation 8s infinite linear;
}
#-webkit-keyframes rotation {
0% {
-webkit-transform: rotate(0deg);
filter: drop-shadow(16px 16px 10px rgb(255, 255, 255, 0.8));
}
35% {
-webkit-transform: rotate(38deg) rotateX(5deg);
filter: drop-shadow(0px 10px 16px rgb(255, 255, 255, 0.8));
}
65% {
-webkit-transform: rotate(-38deg) rotateX(2deg);
filter: drop-shadow(16px 0px 10px rgb(255, 255, 255, 0.8));
}
86% {
-webkit-transform: rotateX(-20deg) rotateY(1deg);
filter: drop-shadow(0px 10px 16px rgb(255, 255, 255, 0.8));
}
100% {
-webkit-transform: rotate(0deg);
filter: drop-shadow(16px 16px 10px rgb(255, 255, 255, 0.8));
}
}
/*---------------------------------------section-2-------------------------------------------*/
#section2 {
padding: 60px 130px;
display: inline-block;
background: rgba(0, 0, 0, 0);
height: 100vh;
}
.content {
width: 59%;
background: rgba(0, 0, 0, 0.6);
position: relative;
padding-bottom: 30px;
padding-left: 30px;
display: block;
}
.content p {
width: 88%;
margin: 15px;
text-align: left;
}
.content h2 {
text-align: center;
padding-top: 30px;
}
.crystal-animation {
width: 68%;
float: right;
margin-top: -56%;
margin-right: -80%;
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
}
aside {
display: block;
}
/*---------------------------------------section-3-------------------------------------------*/
#section3 {
background: rgba(0, 0, 0, 0);
height: 100vh;
}
#section3:nth-child(2) {
display: flex;
align-items: center;
justify-content: center;
}
/*--------constellation-cards----------*/
.gallery {
list-style: none outside none;
flex-direction: row;
display: flex;
align-content: center;
flex-flow: row wrap;
justify-content: center;
}
h2,
p {
text-align: center;
}
.heading {
text-align: center;
}
.gallery li {
margin: 10px;
}
.gallery li:hover {
transform: scale(1.1)
}
.svg {
width: 75%;
filter: drop-shadow(10px)rgba(0, 0, 0, 0.6);
-moz-box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.6);
-khtml-box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.6);
}
/*---------------------------------------section-3-content---------------------------------*/
/*------------card-content-------------*/
#section3-content {
flex: 90%;
padding: 60px 130px;
display: inline-block;
background: rgba(0, 0, 0, 0);
height: 100vh;
}
.intro h3 {
font-family: 'Gabriela', serif;
}
.content-text {
background: rgba(0, 0, 0, 0.7);
position: relative;
padding-bottom: 30px;
padding-left: 20px;
}
.constellation-img {
opacity: .35;
width: 50%;
float: left;
top: 20%;
position: relative;
}
.constellation-star {
width: 56%;
opacity: 1;
float: left;
left: 1%;
margin-top: 20px;
position: absolute;
}
.intro {
float: right;
width: 50%;
top: 40%;
padding-top: 50px;
padding-right: 100px;
}
.constellation-pattern {
width: 11%;
opacity: .9;
margin-left: -10px;
margin-bottom: -15px;
}
.intro p {
text-align: left;
font-size: 1em;
margin-bottom: 10px;
}
.button {
margin: 0;
padding: 0;
}
.constellation-icon li {
list-style: none;
float: left;
}
.constellation-button {
width: 13%;
/*--------border: 2px solid opacity .3 #fff;
background: opacity .3 #fff;
border-radius: 10px;-----------*/
}
/*----------44--------------------------section-4------------------------------------------*/
#section4 {
height: 100vh;
display: block;
align-content: center;
background: rgba(0, 0, 0, 0.8);
position: relative;
padding: 0;
margin: 0;
}
.s3 {
text-align: left;
}
.s3-content {
width: 74%;
padding-top: 16%;
padding-left: 30%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="twinkling"></div>
<header>
<div class="header-container">
<h1>Constellations</h1>
</div>
<div class="button-container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul>
<li>Home</li>
<li>About</li>
<li>12 Constellations</li>
<li>Stargazing</li>
</ul>
</nav>
</div>
</header>
<div class="container">
<section id="section1" class="background">
<div id="crystal-animation">
<figure>
<img src="img/crystal.svg" alt="" class="crystal">
</figure>
</div>
</section>
<section id="section2" class="background">
<article class="content">
<h2>What is Constellations?</h2>
<p>Constellations are patterns in the night sky often formed by the most prominent stars to the naked eye. </p>
<p>Constellations often carry names and take the shape of gods, hunters, princesses, objects and mythical beasts associated with Greek mythology – however, at times, it requires quite an imagination to draw out what some constellations are supposed
to represent! </p>
<aside><img src="img/crystal-animation.svg" alt="" class="crystal-animation"></aside>
</article>
</section>
<!-- section-3---->
<section id="section3" class="background">
<h2>12 Constellations</h2>
<p>Click the constellation cards and understand more.</p>
<div class="card">
<ul class="gallery">
<li>
<figcaption>
<img src="img/12-constellation-cards/1.svg" alt="" class="svg">
</figcaption>
</li>
<li>
<img src="img/12-constellation-cards/4.svg" alt="" class="svg">
</li>
<li>
<img src="img/12-constellation-cards/7.svg" alt="" class="svg">
</li>
<li>
<img src="img/12-constellation-cards/10.svg" alt="" class="svg">
</li>
</ul>
<ul class="gallery">
<li>
<img src="img/12-constellation-cards/2.svg" alt="" class="svg">
</li>
<li>
<img src="img/12-constellation-cards/5.svg" alt="" class="svg">
</li>
<li>
<img src="img/12-constellation-cards/8.svg" alt="" class="svg">
</li>
<li>
<img src="img/12-constellation-cards/11.svg" alt="" class="svg">
</li>
</ul>
<ul class="gallery">
<li>
<img src="img/12-constellation-cards/3.svg" alt="" class="svg">
</li>
<li>
<img src="img/12-constellation-cards/6.svg" alt="" class="svg">
</li>
<li>
<img src="img/12-constellation-cards/9.svg" alt="" class="svg">
</li>
<li>
<img src="img/12-constellation-cards/12.svg" alt="" class="svg">
</li>
</ul>
</div>
</section>
<section id="section3-content" class="background">
<div class="content-text">
<img src="img/12-constellation-pattern/Aries-img.svg" alt="" class="constellation-img"><img src="img/12-constellation-pattern/Aries-star.svg" alt="" class="constellation-star">
<article class="intro">
<img src="img/12-constellation-pattern/Aries-pattern.svg" alt="" class="constellation-pattern">
<h3>Aries</h3>
<p>While one of the biggest, most famous, and oldest named constellations, Aquarius is faint and often hard to find/see. In Greek mythology, Aquarius represented Ganymede, a very handsome young man. Zeus recognized the lad’s good looks, and invited
Ganymede to Mt. Olympus to be the cupbearer of the gods. For his service he was granted eternal youth, as well as a place in the night sky.
</p>
<p>Despite its prominent position and large size, you can see that Aquarius doesn’t really have defining features, nor does it contain any bright stars. The protruding line to the right is Aquarius’s right arm, with the large downward shape being
a combination of the water flowing down out of the vase and his right leg. While not the entire constellation, what’s drawn above is what you’re most likely to see in the night sky. You won’t see this one in the city; you’ll need a dark sky
to find the cupbearer.
</p>
</article>
<div class="button">
<ul class="constellation-icon">
<li>
<img src="img/12-constellation-pattern/Aries-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Leo-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Sagittarius-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Taurus-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Virgo-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Capricorn-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Gemini-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Libra-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Aquarius-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Cancer-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Pisces-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Scorpio-pattern.svg" alt="" class="constellation-button">
</li>
</ul>
</div>
</div>
</section>
<!-- section-4---->
<section id="section4" class="background">
<div class="s3-content">
<h2>How to Find Constellations in the Night Sky?</h2>
<p class="s3">Using a star map will be your best bet for assisting in finding where to look for constellations, depending on your location and time of year. It’s different depending on where you live and on the seasons. You can also need the additional app to
help find the constellations, that lets you enter your location and gives you a customized star map. </p>
<p class="s3">All you need is a dark sky, so as far away from cities as possible, and for extra visual aide, a pair of binoculars or a telescope. With binoculars or a telescope, you’ll see fainter stars and other features like nebulae and star clusters. When
you’re out observing, you’ll want to generally orient yourself towards the North Star.</p>
</div>
</section>

Marquee div in flex

I'm trying to create an infinite horizontal "scroll" like a marquee effect (like this one, for example).
This is my code:
.parent {
border: 1px solid black;
width: 100%;
height: 2rem;
}
.container {
height: 100%;
display: flex;
padding-left: 10%;
border: 1px solid tomato;
animation: marquee 5s linear infinite;
}
#keyframes marquee {
0% {
transform: translate(0%, 0);
}
100% {
transform: translate(-100%, 0);
}
}
.child1 {
width: 10rem;
height: 100%;
background-color: #84B7DF;
}
.child2 {
width: 18rem;
height: 100%;
background-color: #f58db6;
}
.child3 {
width: 13rem;
height: 100%;
background-color: #ffc410;
}
.child4 {
width: 21rem;
height: 100%;
background-color: #C8E7C1;
}
<div class="parent">
<div class="container">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
<div class="child4"></div>
</div>
</div>
As you can see, it works but not perfectly.
I would like that as soon as the green rectangle has shifted, the blue (slightly spaced) one immediately appears, I don't want there to ever be a whole white screen.
I hope is clear what I mean...
Thanks a lot!

You could just add one more container element with same children, and then use display: flex with overflow: hidden on parent element. Also you can set width of the .container element to be larger then the window width using vw units and flex property.
Adjust width and padding properties on container if you have to.
.parent {
border: 1px solid black;
width: 100%;
height: 2rem;
display: flex;
overflow: hidden;
}
.container {
height: 100%;
flex: 0 0 120vw;
display: flex;
padding-right: 10%;
border: 1px solid tomato;
animation: marquee 5s linear infinite;
}
#keyframes marquee {
0% {
transform: translate(0%, 0);
}
100% {
transform: translate(-100%, 0);
}
}
.child1 {
width: 10rem;
height: 100%;
background-color: #84B7DF;
}
.child2 {
width: 18rem;
height: 100%;
background-color: #f58db6;
}
.child3 {
width: 13rem;
height: 100%;
background-color: #ffc410;
}
.child4 {
width: 21rem;
height: 100%;
background-color: #C8E7C1;
}
<div class="parent">
<div class="container">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
<div class="child4"></div>
</div>
<div class="container other">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
<div class="child4"></div>
</div>
</div>
Another solution is to add padding-right width vw units on container.
.parent {
border: 1px solid black;
width: 100%;
height: 2rem;
display: flex;
overflow: hidden;
}
.container {
height: 100%;
display: flex;
padding-right: 50vw;
border: 1px solid tomato;
animation: marquee 5s linear infinite;
}
#keyframes marquee {
0% {
transform: translate(0%, 0);
}
100% {
transform: translate(-100%, 0);
}
}
.child1 {
width: 10rem;
height: 100%;
background-color: #84B7DF;
}
.child2 {
width: 18rem;
height: 100%;
background-color: #f58db6;
}
.child3 {
width: 13rem;
height: 100%;
background-color: #ffc410;
}
.child4 {
width: 21rem;
height: 100%;
background-color: #C8E7C1;
}
<div class="parent">
<div class="container">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
<div class="child4"></div>
</div>
<div class="container other">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
<div class="child4"></div>
</div>
</div>
Javascript / jQuery solution, you can first create clone of the original element and append it to parent. Create a function that will decrease left position of the elements with setInterval function. If the offset is less then -width of the same element that means that element is off the screen. In that case you should move element to the end of the window or to the end of the other element with some offset.
const parent = $(".parent");
const container = $(".container");
const offset = 250;
const clone = cloner(container, parent, offset);
function cloner(element, parent, offset) {
const clone = element.clone();
const width = element.width();
clone.css({left: width + offset})
parent.append(clone)
return clone;
}
function move(element, size = 1) {
const position = element.position().left;
const width = element.width();
if (position < -width) {
const next = element.siblings().first();
const nPosition = next.position().left;
const nWidth = next.width();
const wWidth = $(window).width();
if (nPosition + nWidth < wWidth) {
element.css({left: wWidth})
} else {
element.css({left: nPosition + nWidth + offset})
}
} else {
element.css({left: position - size})
}
}
window.mover = setInterval(() => {
move(container)
move(clone)
}, 5)
.parent {
border: 1px solid black;
width: 100%;
height: 2rem;
display: flex;
overflow: hidden;
position: relative;
}
.parent>div {
position: absolute;
left: 0;
}
.container {
height: 100%;
display: flex;
border: 1px solid tomato;
}
.child1 {
width: 10rem;
height: 100%;
background-color: #84B7DF;
}
.child2 {
width: 18rem;
height: 100%;
background-color: #f58db6;
}
.child3 {
width: 13rem;
height: 100%;
background-color: #ffc410;
}
.child4 {
width: 21rem;
height: 100%;
background-color: #C8E7C1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
<div class="container">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
<div class="child4"></div>
</div>
</div>

.marquee {
position: relative;
width: 100%;
height: 1.5em;
line-height: 1.5em;
overflow: hidden;
> div {
position: absolute;
display: flex;
flex-wrap: nowrap;
animation: marquee 10s linear infinite;
transform: translateX(100%);
> * {
display: inline;
white-space: nowrap;
&:last-child {
padding-right: 100%;
}
}
}
}
#keyframes marquee {
0% {
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}

Categories