I have a set of cards that I'm trying to stack. The images aren't fitting the cards properly. They only fit the card when I hover over it. Also, the function I have for them to scroll isn't working when I click them. I have provided a screenshot and my code below. Thanks!:
Screenshot of the issue:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SP Card stack</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css'>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!--Studio List-->
<div class="container">
<div class="card1-stack">
<!---Button for scroll-->
<a class="buttons prev" href="#"><</a>
<!---Button for scroll-->
<ul class="card-list">
<!--Studio Front Page-->
<li class="card1 text-white card-has-bg click-col" style="background-image:url('https://westlakepro.com/wp-content/uploads/2020/01/SnoopDoggStudio.jpg');">
<div class="card-img-overlay d-flex flex-column">
<div class="card-body">
<div class="media">
<img class="mr-3 rounded-circle"
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQxUXsEFPioqCqDqgp7MeLNpM7iZYL6mt97ElI3LwCnuFoarwmSWbJquoEwbi1AJSRzXBs&usqp=CAU"
alt="Generic placeholder image" style="max-width:50px">
<div class="media-body">
<h6 class="card-meta mb-2"><strong>CC Studios</strong></h6>
<small class="stuLocation">Bethesda, MD</small>
</div>
</div>
<!--Heart Button--->
<div class="btns1">
<Button style="font-size: 35px" onclick="Toggle1()" id="btnh1" class="btn"><i class="fas fa-heart"></i></Button>
</div>
<!---Heart Button--->
<!---Star Rating--->
<div class="rating-box">
<div class="star-source">
<svg>
<linearGradient x1="50%" y1="5.41294643%" x2="87.5527344%" y2="65.4921875%" id="grad">
<stop stop-color="#bf209f" offset="0%"></stop>
<stop stop-color="#d62a9d" offset="60%"></stop>
<stop stop-color="#ED009E" offset="100%"></stop>
</linearGradient>
<symbol id="star" viewBox="153 89 106 108">
<polygon id="star-shape" stroke="url(#grad)" stroke-width="5" fill="currentColor" points="206 162.5 176.610737 185.45085 189.356511 150.407797 158.447174 129.54915 195.713758 130.842203 206 95 216.286242 130.842203 253.552826 129.54915 222.643489 150.407797 235.389263 185.45085"></polygon>
</symbol>
</svg>
</div>
<div class="star-container">
<input type="radio" name="star" id="five">
<label for="five">
<svg class="star">
<use xlink:href="#star"/>
</svg>
</label>
<input type="radio" name="star" id="four">
<label for="four">
<svg class="star">
<use xlink:href="#star"/>
</svg>
</label>
<input type="radio" name="star" id="three">
<label for="three">
<svg class="star">
<use xlink:href="#star"/>
</svg>
</label>
<input type="radio" name="star" id="two">
<label for="two">
<svg class="star">
<use xlink:href="#star" />
</svg>
</label>
<input type="radio" name="star" id="one">
<label for="one">
<svg class="star">
<use xlink:href="#star" />
</svg>
</label>
</div>
</div>
<!---Star Rating--->
</div>
</div>
</li>
<!--Studio Front Page-->
<!--Studio Room 1-->
<li class="card1 text-white card-has-bg click-col" style="background-image:url('https://westlakepro.com/wp-content/uploads/2020/01/SnoopDoggStudio.jpg');">
<div class="card-img-overlay d-flex flex-column">
<div class="card-body">
</div>
</li>
<!--Studio Room 1-->
</ul>
<a class="buttons next" href="#">></a>
</div>
</div>
<!--Studio One-->
<!--Studio List-->
<script src="cardstack.js"></script>
</body>
</html>
CSS:
/*---Card One---*/
/*---Card Body---*/
.card1 {
position: relative;
top: 45px;
right: 300px;
margin: auto;
border: none;
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
overflow: hidden;
border-radius: 20px;
width: 420px;
height: 330px;
box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);
}
.stuLocation{
position: relative;
top: -10px;
}
.card1.card-has-bg {
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
background-size: 120%;
background-repeat: no-repeat;
background-position: center center;
}
.card1.card-has-bg:hover {
transform: scale(0.98);
box-shadow: 0 0 5px -2px rgba(0, 0, 0, 0.3);
background-size: 130%;
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
}
.card1.card-has-bg:hover .card-img-overlay {
transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #d2d2d25c 100%);
}
.card1 .card-meta {
color: #9370DB;
}
.card1 .card-body {
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
}
.card1:hover {
cursor: pointer;
transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
}
.card1:hover .card-body {
margin-top: 30px;
transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
}
.card1 .card-img-overlay {
background-color: rgba(138, 138, 138, 0.425);
}
/*---Card Body---*/
/*---Heart Button---*/
.btns1{
position: relative;
top: -70px;
left: 300px;
}
/*---Heart Button---*/
/*---Star Rating---*/
.rating-box {
position: relative;
top: -75px;
left: -60px;
border-radius: 15px !important;
width: 105px;
height: 15px;
margin: auto;
margin-bottom: 10px;
background-color: #e5e5e55a;
border: 1px;
box-sizing: border-box;
}
svg {
position: relative;
top: -6px;
width: 20px;
height: 20px;
padding-left: 3px;
padding-right: 3px;
}
/* hide radio buttons */
input[name="star"] {
display: inline-block;
width: 0;
opacity: 0;
margin-left: -2px;
}
/* hide source svg */
.star-source {
width: 0;
height: 0;
visibility: hidden;
}
/* set initial color to transparent so fill is empty*/
.star {
color: #7a7a7a;
transition: color 0.2s ease-in-out;
}
/* set direction to row-reverse so 5th star is at the end and ~ can be used to fill all sibling stars that precede last starred element*/
.star-container {
display: flex;
flex-direction: row-reverse;
justify-content: center;
}
label:hover ~ label .star,
svg.star:hover,
input[name="star"]:focus ~ label .star,
input[name="star"]:checked ~ label .star {
color: #fbff28;
}
input[name="star"]:checked + label .star {
animation: starred 0.5s;
}
input[name="star"]:checked + label {
animation: scaleup 1s;
}
#keyframes scaleup {
from {
transform: scale(1.2);
}
to {
transform: scale(1);
}
}
#keyframes starred {
from {
color: #d6ca2a;
}
to {
color: #d6ca2a;
}
}
/*---Star Rating---*/
#media (max-width: 768px) {
.card {
min-height: 350px;
}
}
#media (max-width: 420px) {
.card {
min-height: 300px;
}
}
/*---Card stack---*/
.container {
width: 100%;
height: 900px;
background-color: #fff;
padding: 50px 80px;
}
.container .card1-stack {
width: 500px;
height: 250px;
position: absolute;
margin: 20px auto;
}
.container .card1-stack .buttons {
display: none;
position: absolute;
background: rgba(0, 0, 0, 0.46);
border: 2px solid rgba(255, 255, 255, 0.7);
border-radius: 50%;
width: 35px;
height: 35px;
left: 0;
top: 55%;
color: rgba(255, 255, 255, 0.7);
text-align: center;
line-height: 35px;
text-decoration: none;
font-size: 22px;
z-index: 100;
outline: none;
transition: all 0.2s ease;
}
.container .card1-stack .buttons:hover {
transform: scale(1.3, 1.3);
}
.container .card1-stack .prev {
left: 15px;
right: auto;
}
.container .card1-stack .next {
left: auto;
right: 15px;
}
.container .card1-stack .carousel .buttons:hover {
color: #C01313;
background: #fff;
}
.container .card1-stack .card-list {
width: 300px;
}
.container .card1-stack .card-list__image {
height: 200px;
}
.container .card1-stack .card-list__text {
color: #fff;
font-weight: 300;
}
.container .card1-stack .card-list li {
display: flex;
align-items: center;
justify-content: center;
transition: all 100ms ease-in-out;
border-radius: 10px;
position: absolute;
list-style: none;
height: 300px;
left: 0;
right: 0;
margin: 0 auto;
padding-top: 20px;
text-align: center;
-webkit-box-shadow: 0 2px 15px 1px rgba(225, 225, 225, 0.5);
box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.5);
}
.container .card1-stack .card-list li:nth-child(1) {
top: 24px;
width: 60%;
/* animation: scaleCard 100ms; */
}
.container .card1-stack .card-list li:nth-child(2) {
top: 36px;
width: 70%;
}
.container .card1-stack .card-list li:nth-child(3) {
top: 48px;
width: 80%;
}
.container .card1-stack .card-list li:nth-child(4) {
top: 60px;
width: 90%;
}
.container .card1-stack .card-list li:nth-child(5) {
top: 72px;
width: 100%;
}
.container .card1-stack:hover > .buttons.prev {
display: block;
animation: bounceInLeft 200ms;
}
.container .card1-stack:hover > .buttons.next {
display: block;
animation: bounceInRight 200ms;
}
.transformThis {
animation: scaleDown 500ms;
}
.transformPrev {
animation: scaleUp 100ms;
display: none;
}
#keyframes scaleUp {
0% {
transform: scale(1.2) translateY(50px);
opacity: 0;
}
20% {
transform: scale(1.15) translateY(40px);
opacity: 0.1;
}
40% {
transform: scale(1.1) translateY(30px);
opacity: 0.2;
}
60% {
transform: scale(1.05) translateY(20px);
opacity: 0.4;
}
80% {
transform: scale(1.01) translateY(10px);
opacity: 0.8;
}
100% {
transform: scale(1) translateY(0);
opacity: 1;
}
}
#keyframes scaleDown {
0% {
transform: scale(1) translateY(0);
opacity: 1;
}
20% {
transform: scale(1.01) translateY(20px);
opacity: 0.8;
}
40% {
transform: scale(1.05) translateY(40px);
opacity: 0.4;
}
60% {
transform: scale(1.1) translateY(60px);
opacity: 0.2;
}
80% {
transform: scale(1.15) translateY(80px);
opacity: 0.1;
}
100% {
transform: scale(1.2) translateY(100px);
opacity: 0;
}
}
#keyframes scaleCard {
0% {
top: 5px;
}
100% {
top: 24px;
}
}
#keyframes bounceInLeft {
0% {
opacity: 0;
transform: translateX(40px);
}
100% {
transform: translateX(0);
}
}
#keyframes bounceInRight {
0% {
opacity: 0;
transform: translateX(-40px);
}
100% {
transform: translateX(0);
}
}
/*---Card stack---*/
/*---Card One---*/
JS:
var $card = $('.card1');
var lastCard = $(".card-list .card").length - 1;
$('.next').click(function(){
var prependList = function() {
if( $('.card1').hasClass('activeNow') ) {
var $slicedCard = $('.card1').slice(lastCard).removeClass('transformThis activeNow');
$('ul').prepend($slicedCard);
}
}
$('li').last().removeClass('transformPrev').addClass('transformThis').prev().addClass('activeNow');
setTimeout(function(){prependList(); }, 150);
});
$('.prev').click(function() {
var appendToList = function() {
if( $('.card1').hasClass('activeNow') ) {
var $slicedCard = $('.card1').slice(0, 1).addClass('transformPrev');
$('.card-list').append($slicedCard);
}}
$('li').removeClass('transformPrev').last().addClass('activeNow').prevAll().removeClass('activeNow');
setTimeout(function(){appendToList();}, 150);
});
You can change .card1.card-has-bg's background-size to 130% that can solve image fitting problem
.card1.card-has-bg {
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
background-size: 130%;
background-repeat: no-repeat;
background-position: center center;
}
I test the function you provide
When I click button of .prev or .next, it works
I saw you use jQuery but you did not source cdn of jQuery in your HTML
So, you should source cdn of jQuery in HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
Related
The Code:
<html>
<style>
.img {
max-width: 100%;
}
.Headerstyle {
color: Black;
transition: transform .2s;
text-align: center;
margin-top: 39%;
}
.Headerstyle:hover {
transform: scale(1.5);
transition: 0.2s;
}
.HeaderstyleBack {
color: white;
transition: transform .2s;
text-align: center;
margin-top: 39%;
}
.HeaderstyleBack:hover {
transform: scale(1.5);
transition: 0.2s;
}
.image1 {
padding: 10px;
transition: transform .2s;
}
.image2 {
padding: 10px;
transition: transform .2s;
}
.image1:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.image2:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.imageback1 {
padding: 10px;
transition: transform .2s;
}
.imageback2 {
padding: 10px;
transition: transform .2s;
}
.imageback1:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.imageback2:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.footer {
position: relative;
left: 0;
bottom: 7%;
width: 100%;
background-color: ##0000ffff;
color: white;
text-align: center;
}
body {
border-style: solid;
border-width: 17px;
border-radius: 5px;
padding: 100px;
transition: 5s;
}
body {
margin: 0;
padding: 0;
animation: pulse 5s infinite;
}
.container {
width: 100%;
margin: 0px;
}
.Loading {
position: relative;
display: inline-block;
width: 100%;
height: 10%;
background: #f1f1f1;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
border-radius: 4px;
overflow: hidden;
margin-bottom: -50px;
}
.Loading:after {
content: '';
position: absolute;
background: blue;
width: 10%;
height: 100%;
border-radius: 2px;
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
animation: load 5s infinite;
}
#keyframes load {
0% {
left: 0%;
}
25% {
width: 50%;
left: 50%
}
50% {
width: 10%;
left: 90%
}
75% {
width: 50%;
left: 0%
}
100% {
width: 10%;
left: 0%
}
}
#keyframes pulse {
0% {
border-color: gray;
}
25% {
border-color: gray;
}
50% {
border-color: gray;
}
75% {
border-color: #282828;
}
100% {
border-color: #282828;
}
}
.LoadingBack {
position: relative;
display: inline-block;
width: 100%;
height: 10%;
background: #000000;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
border-radius: 4px;
overflow: hidden;
margin-bottom: -50px;
}
.LoadingBack:after {
content: '';
position: absolute;
background: white;
width: 10%;
height: 100%;
border-radius: 2px;
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
animation: load 5s infinite;
}
#keyframes load {
0% {
left: 0%;
}
25% {
width: 50%;
left: 50%
}
50% {
width: 10%;
left: 90%
}
75% {
width: 50%;
left: 0%
}
100% {
width: 10%;
left: 0%
}
}
#keyframes pulse {
0% {
border-color: #6699ff;
}
25% {
border-color: #ff6600;
}
50% {
border-color: #6699ff;
}
75% {
border-color: #ff6600;
}
100% {
border-color: #6699ff;
}
}
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
background-color: transparent;
width: 100%;
height: 100%;
border: 1px solid #f1f1f1;
perspective: 1000px;
/* Remove this if you don't want the 3D effect */
}
/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 1.5s;
transform-style: preserve-3d;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:active .flip-card-inner {
transform: rotateY(180deg);
}
/* Position the front and back side */
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
/* Safari */
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
background-color: #FFFDD0;
color: black;
}
/* Style the back side */
.flip-card-back {
# background-color: orange;
color: white;
font: 18px Arial, sans-serif;
background-image: url('https://c.tenor.com/YR9WPlpD1zEAAAAd/cloud.gif');
background-size: cover;
transform: rotateY(180deg);
}
//////////////////////////
*{
margin: 0px;
padding: 0px;
}
body{
font-family: Ariel, Helvetica, sans-serif;
background-color: #A3EBB1 ;
color: white;
line-height: 1.6;
text-align: center;
}
.container-welcome{
max-width: 960px;
margin: auto;
padding: 0 30px;
}
#showcase{
height: 300px;
}
#showcase h1{
font-size: 50px;
line-height: 1.3;
position: relative;
animation: heading;
animation-duration: 2.5s;
animation-fill-mode: forwards;
}
#keyframes heading{
0% {top: -50px;}
100% {top: 200px;}
}
#visual2 {
position: relative;
animation-name: visual;
animation-duration: 2s;
animation-fill-mode: forwards;
}
#keyframes visua2l{
0% {left: -1000px;}
100% {left: 0px;}
}
#visual {
position: relative;
animation: mymove 5s infinite;
}
#keyframes mymove {
50% {transform: rotate(45deg);}
}
.homepage {
display = 'none';
}
//////////////////////////
</style>
<script>
function delay(time) {
return new Promise(resolve => setTimeout(resolve, time));
}
function bodyOnload() {
document.getElementById('animatedImg').style.WebkitTransitionDuration = '1s';
document.getElementById('animatedImg').style.webkitTransform = 'rotate(45deg)';
delay(900).then(() => {
document.getElementById('animatedImg').src = "https://www.iconsdb.com/icons/preview/black/wink-xxl.png";
/* if you don't want to rotate base delete this delay block*/
delay(900).then(() => {
document.getElementById('animatedImg').src = "https://www.iconsdb.com/icons/preview/white/emoticon-30-xxl.png";
document.getElementById('animatedImg').style.WebkitTransitionDuration = '1s';
document.getElementById('animatedImg').style.webkitTransform = 'rotate(0)';
setTimeout(() => { const box = document.getElementById('animatedImg'); box.style.display = 'none';}, 2000);
setTimeout(() => { const box = document.getElementById('showcase'); box.style.display = 'none';}, 2000);
setTimeout(() => { const box2 = document.getElementById('homepage'); box2.style.display = 'block';}, 2000);
});
});
}
</script>
<body>
<head>
<title>Dynamic Web Page</title>
</head>
<header id="showcase">
<h1>Uygulamaya Hoşgeldiniz</h1>
</header>
<body onload="bodyOnload()">
<div class="container-welcome">
<img id="animatedImg" src="https://www.iconsdb.com/icons/preview/white/emoticon-30-xxl.png">
</div>
</body>
<div class="flip-card" id="homepage" style= "display:none;">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="footer" style="
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;">
<p class="Headerstyle"><b></b></p>
<div>
<div style="display: flex;justify-content: center;">
<img class="image1" src="https://cdn-icons-png.flaticon.com/128/2111/2111628.png" alt="stackoverflow icon" width="60" height="60">
<img class="image2" src="https://cdn-icons-png.flaticon.com/512/174/174857.png" alt="linkedin icon" width="60" height="60">
</div>
<div class="container">
</div>
<div class="Loading"></div>
</div>
</div>
</div>
<div class="flip-card-back">
<div class="footer" style="
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;">
<p class="HeaderstyleBack"><b>tasci.murat06#gmail.com</b></p>
<div>
<div style="display: flex;justify-content: center;">
<img class="imageback1" src="https://cdn.iconscout.com/icon/free/png-64/stack-overflow-3770615-3147335.png" alt="stackoverflow icon" width="60" height="60">
<img class="imageback2" src="https://cdn.iconscout.com/icon/free/png-64/linkedin-104-436658.png" alt="linkedin icon" width="60" height="60">
</div>
<div class="container">
</div>
<div class="LoadingBack"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Hello friends, How can I prevent the border from appearing when the welcome screen appears?
That means I want to see a border on the only main page. How can fix this on my code? I couldn't block the border during the welcome screen. I also added a picture of the desired situation. You can see it below. I am waiting for your help.
First define an id to body element, then write document.getelementbyID("definedID").style.border="solid 50px"; in your function(bodyOnLoad()). Therefore you have a animated border that scaling 0px to 50px on body.
You can use the code below: (in chrome, it will work more accurately than the snippet)
<html>
<style>
.img {
max-width: 100%;
}
.Headerstyle {
color: Black;
transition: transform .2s;
text-align: center;
margin-top: 39%;
}
.Headerstyle:hover {
transform: scale(1.5);
transition: 0.2s;
}
.HeaderstyleBack {
color: white;
transition: transform .2s;
text-align: center;
margin-top: 39%;
}
.HeaderstyleBack:hover {
transform: scale(1.5);
transition: 0.2s;
}
.image1 {
padding: 10px;
transition: transform .2s;
}
.image2 {
padding: 10px;
transition: transform .2s;
}
.image1:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.image2:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.imageback1 {
padding: 10px;
transition: transform .2s;
}
.imageback2 {
padding: 10px;
transition: transform .2s;
}
.imageback1:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.imageback2:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.footer {
position: relative;
left: 0;
bottom: 7%;
width: 100%;
background-color: ##0000ffff;
color: white;
text-align: center;
}
.all {
display:block;
border-style: none;
border-width: 0 px;
border-radius: 5px;
padding: 100px;
transition: 5s;
}
.all {
margin: 0;
padding: 0;
animation: pulse 5s infinite;
}
.container {
width: 100%;
margin: 0px;
}
.Loading {
position: relative;
display: inline-block;
width: 100%;
height: 10%;
background: #f1f1f1;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
border-radius: 4px;
overflow: hidden;
margin-bottom: -50px;
}
.Loading:after {
content: '';
position: absolute;
background: blue;
width: 10%;
height: 100%;
border-radius: 2px;
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
animation: load 5s infinite;
}
#keyframes load {
0% {
left: 0%;
}
25% {
width: 50%;
left: 50%
}
50% {
width: 10%;
left: 90%
}
75% {
width: 50%;
left: 0%
}
100% {
width: 10%;
left: 0%
}
}
#keyframes pulse {
0% {
border-color: gray;
}
25% {
border-color: gray;
}
50% {
border-color: gray;
}
75% {
border-color: #282828;
}
100% {
border-color: #282828;
}
}
.LoadingBack {
position: relative;
display: inline-block;
width: 100%;
height: 10%;
background: #000000;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
border-radius: 4px;
overflow: hidden;
margin-bottom: -50px;
}
.LoadingBack:after {
content: '';
position: absolute;
background: white;
width: 10%;
height: 100%;
border-radius: 2px;
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
animation: load 5s infinite;
}
#keyframes load {
0% {
left: 0%;
}
25% {
width: 50%;
left: 50%
}
50% {
width: 10%;
left: 90%
}
75% {
width: 50%;
left: 0%
}
100% {
width: 10%;
left: 0%
}
}
#keyframes pulse {
0% {
border-color: #6699ff;
}
25% {
border-color: #ff6600;
}
50% {
border-color: #6699ff;
}
75% {
border-color: #ff6600;
}
100% {
border-color: #6699ff;
}
}
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
background-color: transparent;
width: 100%;
height: 100%;
border: 1px solid #f1f1f1;
perspective: 1000px;
/* Remove this if you don't want the 3D effect */
}
/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 1.5s;
transform-style: preserve-3d;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:active .flip-card-inner {
transform: rotateY(180deg);
}
/* Position the front and back side */
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
/* Safari */
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
background-color: #FFFDD0;
color: black;
}
/* Style the back side */
.flip-card-back {
# background-color: orange;
color: white;
font: 18px Arial, sans-serif;
background-image: url('https://c.tenor.com/YR9WPlpD1zEAAAAd/cloud.gif');
background-size: cover;
transform: rotateY(180deg);
}
*{
margin: 0px;
padding: 0px;
}
body{
font-family: Ariel, Helvetica, sans-serif;
background-color: #A3EBB1 ;
color: white;
line-height: 1.6;
text-align: center;
}
.container-welcome{
max-width: 960px;
margin: auto;
padding: 0 30px;
}
#showcase{
height: 300px;
}
#showcase h1{
font-size: 50px;
line-height: 1.3;
position: relative;
animation: heading;
animation-duration: 2.5s;
animation-fill-mode: forwards;
}
#keyframes heading{
0% {top: -50px;}
100% {top: 200px;}
}
#visual2 {
position: relative;
animation-name: visual;
animation-duration: 2s;
animation-fill-mode: forwards;
}
#keyframes visua2l{
0% {left: -1000px;}
100% {left: 0px;}
}
#visual {
position: relative;
animation: mymove 5s infinite;
}
#keyframes mymove {
50% {transform: rotate(45deg);}
}
</style>
<script>
function delay(time) {
return new Promise(resolve => setTimeout(resolve, time));
}
function bodyOnload() {
document.getElementById('animatedImg').style.WebkitTransitionDuration = '1s';
document.getElementById('animatedImg').style.webkitTransform = 'rotate(45deg)';
delay(900).then(() => {
document.getElementById('animatedImg').src = "https://www.iconsdb.com/icons/preview/black/wink-xxl.png";
/* if you don't want to rotate base delete this delay block*/
delay(900).then(() => {
document.getElementById('animatedImg').src = "https://www.iconsdb.com/icons/preview/white/emoticon-30-xxl.png";
document.getElementById('animatedImg').style.WebkitTransitionDuration = '1s';
document.getElementById('animatedImg').style.webkitTransform = 'rotate(0)';
setTimeout(() => { const box = document.getElementById('animatedImg'); box.style.display = 'none';}, 2000);
setTimeout(() => { const box = document.getElementById('showcase'); box.style.display = 'none';}, 2000);
setTimeout(() => { const box2 = document.getElementById('homepage'); box2.style.display = 'block';}, 2000);
document.getElementById('innerbody').style.border="solid 70px";
});
});
}
</script>
<body>
<head>
<title>Dynamic Web Page</title>
</head>
<header id="showcase">
<h1>Uygulamaya Hoşgeldiniz</h1>
</header>
<body onload="bodyOnload()">
<div class="container-welcome">
<img id="animatedImg" src="https://www.iconsdb.com/icons/preview/white/emoticon-30-xxl.png">
</div>
</body>
<body id="innerbody" class="all">
<div class="flip-card" id="homepage" style= "display:none;">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="footer" style="
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;">
<p class="Headerstyle"><b></b></p>
<div>
<div style="display: flex;justify-content: center;">
<img class="image1" src="https://cdn-icons-png.flaticon.com/128/2111/2111628.png" alt="stackoverflow icon" width="60" height="60">
<img class="image2" src="https://cdn-icons-png.flaticon.com/512/174/174857.png" alt="linkedin icon" width="60" height="60">
</div>
<div class="container">
</div>
<div class="Loading"></div>
</div>
</div>
</div>
<div class="flip-card-back">
<div class="footer" style="
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;">
<p class="HeaderstyleBack"><b>tasci.murat06#gmail.com</b></p>
<div>
<div style="display: flex;justify-content: center;">
<img class="imageback1" src="https://cdn.iconscout.com/icon/free/png-64/stack-overflow-3770615-3147335.png" alt="stackoverflow icon" width="60" height="60">
<img class="imageback2" src="https://cdn.iconscout.com/icon/free/png-64/linkedin-104-436658.png" alt="linkedin icon" width="60" height="60">
</div>
<div class="container">
</div>
<div class="LoadingBack"></div>
</div>
</div>
</div>
</div>
<body>
</body>
<script type="text/javascript">
</script>
</html>
What you need to do is insert this line in your css border: none !important;
.container-welcome{
max-width: 960px;
margin: auto;
padding: 0 30px;
border:none !important;
}
Try Setting the border style for body to none in the css file.
The Code:
<html>
<style>
.img {
max-width: 100%;
}
.Headerstyle {
color: Black;
transition: transform .2s;
text-align: center;
margin-top: 39%;
}
.Headerstyle:hover {
transform: scale(1.5);
transition: 0.2s;
}
.HeaderstyleBack {
color: white;
transition: transform .2s;
text-align: center;
margin-top: 39%;
}
.HeaderstyleBack:hover {
transform: scale(1.5);
transition: 0.2s;
}
.image1 {
padding: 10px;
transition: transform .2s;
}
.image2 {
padding: 10px;
transition: transform .2s;
}
.image1:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.image2:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.imageback1 {
padding: 10px;
transition: transform .2s;
}
.imageback2 {
padding: 10px;
transition: transform .2s;
}
.imageback1:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.imageback2:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.footer {
position: relative;
left: 0;
bottom: 7%;
width: 100%;
background-color: ##0000ffff;
color: white;
text-align: center;
}
body {
border-style: solid;
border-width: 17px;
border-radius: 5px;
padding: 100px;
transition: 5s;
}
body {
margin: 0;
padding: 0;
animation: pulse 5s infinite;
}
.container {
width: 100%;
margin: 0px;
}
.Loading {
position: relative;
display: inline-block;
width: 100%;
height: 10%;
background: #f1f1f1;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
border-radius: 4px;
overflow: hidden;
margin-bottom: -50px;
}
.Loading:after {
content: '';
position: absolute;
background: blue;
width: 10%;
height: 100%;
border-radius: 2px;
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
animation: load 5s infinite;
}
#keyframes load {
0% {
left: 0%;
}
25% {
width: 50%;
left: 50%
}
50% {
width: 10%;
left: 90%
}
75% {
width: 50%;
left: 0%
}
100% {
width: 10%;
left: 0%
}
}
#keyframes pulse {
0% {
border-color: gray;
}
25% {
border-color: gray;
}
50% {
border-color: gray;
}
75% {
border-color: #282828;
}
100% {
border-color: #282828;
}
}
.LoadingBack {
position: relative;
display: inline-block;
width: 100%;
height: 10%;
background: #000000;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
border-radius: 4px;
overflow: hidden;
margin-bottom: -50px;
}
.LoadingBack:after {
content: '';
position: absolute;
background: white;
width: 10%;
height: 100%;
border-radius: 2px;
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
animation: load 5s infinite;
}
#keyframes load {
0% {
left: 0%;
}
25% {
width: 50%;
left: 50%
}
50% {
width: 10%;
left: 90%
}
75% {
width: 50%;
left: 0%
}
100% {
width: 10%;
left: 0%
}
}
#keyframes pulse {
0% {
border-color: #6699ff;
}
25% {
border-color: #ff6600;
}
50% {
border-color: #6699ff;
}
75% {
border-color: #ff6600;
}
100% {
border-color: #6699ff;
}
}
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
background-color: transparent;
width: 100%;
height: 100%;
border: 1px solid #f1f1f1;
perspective: 1000px;
/* Remove this if you don't want the 3D effect */
}
/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 1.5s;
transform-style: preserve-3d;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:active .flip-card-inner {
transform: rotateY(180deg);
}
/* Position the front and back side */
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
/* Safari */
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
background-color: #FFFDD0;
color: black;
}
/* Style the back side */
.flip-card-back {
# background-color: orange;
color: white;
font: 18px Arial, sans-serif;
background-image: url('https://c.tenor.com/YR9WPlpD1zEAAAAd/cloud.gif');
background-size: cover;
transform: rotateY(180deg);
}
//////////////////////////
*{
margin: 0px;
padding: 0px;
}
body{
font-family: Ariel, Helvetica, sans-serif;
background-color: #A3EBB1 ;
color: white;
line-height: 1.6;
text-align: center;
}
.container-welcome{
max-width: 960px;
margin: auto;
padding: 0 30px;
}
#showcase{
height: 300px;
}
#showcase h1{
font-size: 50px;
line-height: 1.3;
position: relative;
animation: heading;
animation-duration: 2.5s;
animation-fill-mode: forwards;
}
#keyframes heading{
0% {top: -50px;}
100% {top: 200px;}
}
#visual2 {
position: relative;
animation-name: visual;
animation-duration: 2s;
animation-fill-mode: forwards;
}
#keyframes visua2l{
0% {left: -1000px;}
100% {left: 0px;}
}
#visual {
position: relative;
animation: mymove 5s infinite;
}
#keyframes mymove {
50% {transform: rotate(45deg);}
}
.homepage {
display = 'none';
}
//////////////////////////
</style>
<script>
setTimeout(() => { const box = document.getElementById('showcase'); box.style.display = 'none';}, 2500);
setTimeout(() => { const box = document.getElementById('visual'); box.style.display = 'none';}, 2500);
setTimeout(() => { const box2 = document.getElementById('homepage'); box2.style.display = 'block';}, 2500);
</script>
<body>
<head>
<title>Dynamic Web Page</title>
</head>
<header id="showcase">
<h1>Uygulamaya Hoşgeldiniz</h1>
</header>
<div id="visual" class="container-welcome">
<img src="https://www.iconsdb.com/icons/preview/white/emoticon-30-xxl.png">
</div>
</div>
<div class="flip-card" id="homepage" style= "display:none;">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="footer" style="
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;">
<p class="Headerstyle"><b></b></p>
<div>
<div style="display: flex;justify-content: center;">
<img class="image1" src="https://cdn-icons-png.flaticon.com/128/2111/2111628.png" alt="stackoverflow icon" width="60" height="60">
<img class="image2" src="https://cdn-icons-png.flaticon.com/512/174/174857.png" alt="linkedin icon" width="60" height="60">
</div>
<div class="container">
</div>
<div class="Loading"></div>
</div>
</div>
</div>
<div class="flip-card-back">
<div class="footer" style="
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;">
<p class="HeaderstyleBack"><b>tasci.murat06#gmail.com</b></p>
<div>
<div style="display: flex;justify-content: center;">
<img class="imageback1" src="https://cdn.iconscout.com/icon/free/png-64/stack-overflow-3770615-3147335.png" alt="stackoverflow icon" width="60" height="60">
<img class="imageback2" src="https://cdn.iconscout.com/icon/free/png-64/linkedin-104-436658.png" alt="linkedin icon" width="60" height="60">
</div>
<div class="container">
</div>
<div class="LoadingBack"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Hello friends,I have 2 questions. Firstly,How can I add a blink animation at the same angle after your smiley face turns a certain angle? In my code there is no blinking smiley feature.
Finally, how do I make the page border not visible on the welcoming page? so mean I don't want the border to appear on the welcoming screen. I have added Example images for this situation
I think this will help you. Add animation to your image and wait for finish animation(with delay function) then change the image with js.
function delay(time) {
return new Promise(resolve => setTimeout(resolve, time));
}
function bodyOnload() {
document.getElementById('animatedImg').style.WebkitTransitionDuration = '1s';
document.getElementById('animatedImg').style.webkitTransform = 'rotate(45deg)';
delay(900).then(() => {
document.getElementById('animatedImg').src = "https://www.iconsdb.com/icons/preview/black/wink-xxl.png";
/* if you don't want to rotate base delete this delay block*/
delay(900).then(() => {
document.getElementById('animatedImg').src = "https://www.iconsdb.com/icons/preview/white/emoticon-30-xxl.png";
document.getElementById('animatedImg').style.WebkitTransitionDuration = '1s';
document.getElementById('animatedImg').style.webkitTransform = 'rotate(0)';
});
});
}
body {
background-color: #A3EBB1;
color: white;
text-align: center;
}
.container-welcome {
max-width: 960px;
margin: auto;
padding: 0 30px;
}
<body onload="bodyOnload()">
<div class="container-welcome">
<img id="animatedImg" src="https://www.iconsdb.com/icons/preview/white/emoticon-30-xxl.png">
</div>
</body>
Creating a basic HTML/CSS webpage. I added some CSS and JavaScript features so that the hamburger menu icon could be clicked and show a sidebar. After implementing JavaScript, the sidebar no longer shows on screen (which was what I wanted), but now the hamburger menu icon is unresponsive and does not reveal the sidebar. I looked over my HTML and CSS but could not find the problem. My code matches the source code of the guide I am following. Any help would be greatly appreciated.
HTML:
<!DOCTYPE html>
<html lang="en"
<head>
<meta charset="UTF-8:">
<meta name="viewport"
content="width=device-width,initial-scale=1.0">
<title>Placeholder</title>
<link rel="stylesheet" href="stylesheet2.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
</head>
<body>
<div class="container">
<div class="hamburger-menu">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</div>
<header class="header">
<div class="img-wrapper">
<img src="ThinkDirBackground1.jpg" />
</div>
<div class="banner">
<h1>Placeholder</h1>
<p>Placeholder <br>
<em>placeholder</em> <br>
1. Placeholder <br>
2. Placeholder<br>
</p>
<button>Placeholder</button>
</div>
</header>
<section class="sidebar">
<ul class="menu">
<li class="menu-item">
<a href="#" class="menu-link"
data-content="Home">Home</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link"
data-content="PH2">PH2</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link"
data-content="PH3">PH3</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link"
data-content="PH4">PH4</a>
</li>
</ul>
</section>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
html {
font-size: 62.5%;
}
.hamburger-menu {
width: 3rem;
height: 3rem;
position: fixed;
top: 5rem;
right: 5rem;
z-index: 200;
display: flex;
flex-direction: column;
justify-content: space-evenly;
cursor: pointer;
transition: right 0.7s;
}
.change .hamburger-menu {
right: 33rem;
}
.line {
width: 100%;
height: .2rem;
background-color: #FFFFFF;
box-shadow: 0.1rem 0.2rem rgba(0,0,0, .2);
}
.line {
background-color: rgba(0,0,0, .8);
}
.change .line-1 {
transform: rotate(45deg)
translate(0.3rem, 0.8rem);
}
.change .line-2 {
opacity: 0;
visibility: hidden;
}
.change .line-3 {
transform: rotate(-45deg)
translate(0.3rem, -0.8rem);
}
.header {
width: 100%;
height: 100vh;
position: relative;
perspective: 100rem;
overflow: hidden;
}
.img-wrapper {
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.8);
overflow: hidden;
}
.img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.5;
animation-name: scale;
animation-duration: 25s;
filter: blur(8px);
-webkit-filter: blur(8px);
}
#keyframes scale {
0% {
transform: scale(1.3);
}
100% {
transform: scale(1);
}
}
.banner {
position: absolute;
top: 30%;
left: 15%;
}
.banner h1 {
font-family: "Sans-serif";
font-size: 9rem;
font-weight: 300;
font-weight: bold;
color: #FFFFFF;
text-shadow: 0 .3rem .5rem rgba(0,0,0, .4);
opacity: 0;
animation: moveBanner 1s .5s;
animation-fill-mode: forwards;
}
.banner p {
font-family: "Sans-serif";
font-size: 2.5rem;
color: #FFFFFF;
width: 70%;
text-shadow: 0 .3rem .5rem rgba(0,0,0, .4);
margin-bottom: 3rem;
opacity: 0;
animation: moveBanner 1s .7s;
animation-fill-mode: forwards;
}
.banner button {
width: 20rem;
height: 5rem;
background-color: #FFFFFF;
border: none;
font-family: "Sans-serif";
text-transform: uppercase;
text-shadow: 0.2rem .2rem rgba(0,0,0, 0.2);
box-shadow: 0.3rem .5rem rgba(0,0,0, 0.4);
cursor: pointer;
opacity: 0;
animation: moveBanner 1s .9s;
animation-fill-mode: forwards;
}
#keyframes moveBanner {
0% {
transform: translateY(40rem) rotateY(-20deg);
}
100% {
transform: translateY(0) rotateY(0);
opacity: 1;
}
}
.sidebar {
width: 40rem;
height: 100vh;
position: fixed;
top: 0;
right: -40rem;
background-color: #FFFFFF;
transition: right .5s;
}
.change .sidebar {
right: 0;
}
.menu {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
.menu-item {
text-align: center;
margin: 0 0 40px 0;
}
.menu-link {
font-family: "Sans-serif";
font-size: 4rem;
color: #555;
position: relative;
}
.menu-link::before {
content: attr(data-content);
position: absolute;
top: 0;
left: 0;
color: #555;
overflow: hidden;
white-space: nowrap;
transition: width .3s ease-in-out;
}
.menu-link:hover::before {
width: 100%;
}
.social-media {
position: absolute;
bottom: 3rem;
width: 100%;
display: flex;
justify-content: center;
}
.social-media i {
font-size: 2.2rem;
margin: 3rem;
width: 4.5rem;
height: 4.5rem;
background-color: #777;
color: #FFF;
isplay: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
transition: background-color 0.3s;
}
.social-media i:hover {
background-color: #c29525;
}
JavaScript
document.querySelector('.hamburger-menu').
addEventListener('click, () => {
document.querySelector('container').classlist.toggle('change')
});
Few things:
You are missing a closing bracket here: addEventListener('click,
classlist should be classList, JS properties are case-sensitive
document.querySelector('container') is looking for the first container element. Use document.querySelector('.container') to get the first element with the class container
document.querySelector('.hamburger-menu').addEventListener('click', () => {
document.querySelector('.container').classList.toggle('change')
});
* {
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
html {
font-size: 62.5%;
}
.hamburger-menu {
width: 3rem;
height: 3rem;
position: fixed;
top: 5rem;
right: 5rem;
z-index: 200;
display: flex;
flex-direction: column;
justify-content: space-evenly;
cursor: pointer;
transition: right 0.7s;
}
.change .hamburger-menu {
right: 33rem;
}
.line {
width: 100%;
height: .2rem;
background-color: #FFFFFF;
box-shadow: 0.1rem 0.2rem rgba(0, 0, 0, .2);
}
.line {
background-color: rgba(0, 0, 0, .8);
}
.change .line-1 {
transform: rotate(45deg) translate(0.3rem, 0.8rem);
}
.change .line-2 {
opacity: 0;
visibility: hidden;
}
.change .line-3 {
transform: rotate(-45deg) translate(0.3rem, -0.8rem);
}
.header {
width: 100%;
height: 100vh;
position: relative;
perspective: 100rem;
overflow: hidden;
}
.img-wrapper {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .8);
overflow: hidden;
}
.img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.5;
animation-name: scale;
animation-duration: 25s;
filter: blur(8px);
-webkit-filter: blur(8px);
}
#keyframes scale {
0% {
transform: scale(1.3);
}
100% {
transform: scale(1);
}
}
.banner {
position: absolute;
top: 30%;
left: 15%;
}
.banner h1 {
font-family: "Sans-serif";
font-size: 9rem;
font-weight: 300;
font-weight: bold;
color: #FFFFFF;
text-shadow: 0 .3rem .5rem rgba(0, 0, 0, .4);
opacity: 0;
animation: moveBanner 1s .5s;
animation-fill-mode: forwards;
}
.banner p {
font-family: "Sans-serif";
font-size: 2.5rem;
color: #FFFFFF;
width: 70%;
text-shadow: 0 .3rem .5rem rgba(0, 0, 0, .4);
margin-bottom: 3rem;
opacity: 0;
animation: moveBanner 1s .7s;
animation-fill-mode: forwards;
}
.banner button {
width: 20rem;
height: 5rem;
background-color: #FFFFFF;
border: none;
font-family: "Sans-serif";
text-transform: uppercase;
text-shadow: 0.2rem .2rem rgba(0, 0, 0, 0.2);
box-shadow: 0.3rem .5rem rgba(0, 0, 0, 0.4);
cursor: pointer;
opacity: 0;
animation: moveBanner 1s .9s;
animation-fill-mode: forwards;
}
#keyframes moveBanner {
0% {
transform: translateY(40rem) rotateY(-20deg);
}
100% {
transform: translateY(0) rotateY(0);
opacity: 1;
}
}
.sidebar {
width: 40rem;
height: 100vh;
position: fixed;
top: 0;
right: -40rem;
background-color: #FFFFFF;
transition: right .5s;
}
.change .sidebar {
right: 0;
}
.menu {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
.menu-item {
text-align: center;
margin: 0 0 40px 0;
}
.menu-link {
font-family: "Sans-serif";
font-size: 4rem;
color: #555;
position: relative;
}
.menu-link::before {
content: attr(data-content);
position: absolute;
top: 0;
left: 0;
color: #555;
overflow: hidden;
white-space: nowrap;
transition: width .3s ease-in-out;
}
.menu-link:hover::before {
width: 100%;
}
.social-media {
position: absolute;
bottom: 3rem;
width: 100%;
display: flex;
justify-content: center;
}
.social-media i {
font-size: 2.2rem;
margin: 3rem;
width: 4.5rem;
height: 4.5rem;
background-color: #777;
color: #FFF;
isplay: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
transition: background-color 0.3s;
}
.social-media i:hover {
background-color: #c29525;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8:">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Placeholder</title>
<link rel="stylesheet" href="stylesheet2.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" />
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="hamburger-menu">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</div>
<header class="header">
<div class="img-wrapper">
<img src="ThinkDirBackground1.jpg" />
</div>
<div class="banner">
<h1>Placeholder</h1>
<p>Placeholder <br>
<em>placeholder</em> <br> 1. Placeholder <br> 2. Placeholder<br>
</p>
<button>Placeholder</button>
</div>
</header>
<section class="sidebar">
<ul class="menu">
<li class="menu-item">
Home
</li>
<li class="menu-item">
PH2
</li>
<li class="menu-item">
PH3
</li>
<li class="menu-item">
PH4
</li>
</ul>
</section>
</div>
<script src="script.js"></script>
</body>
</html>
Press f12 go to Developer mode, check the console.if there has questions,solve them.
You can Single-step debugging in the source page,Network interaction in the network page
I would like to add the full page parallax scroll effect on a one-page website, but I have no idea how to add this effect.
I have tried to set up the section height: 100vh, but the result goes out that the last section covers the above sections.
Do you have any suggestions? Any help is appreciated. Thank you so much.
HTML:
<html lang="en">
<body>
<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>
<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. </p>
<aside><img src="img/crystal-animation.svg" alt="" class="crystal-animation"></aside>
</article>
</section>
<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><img src="img/12-constellation-cards/1.svg" alt="" class="svg"></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="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>
</body>
</html>
JavaScript:
$(document).ready(function () {
let hamburgerClicked = false;
$("#toggle").on("click", function () {
if (hamburgerClicked == false) {
$(".top").css(
"transform",
"translateY(11px) translateX(0) rotate(45deg)"
);
$(".middle").css("display", "none");
$(".bottom").css(
"transform",
"translateY(-11px) translateX(0) rotate(-45deg)"
);
hamburgerClicked = true;
} else {
$(".top").css("transform", "translateY(0px) translateX(0) rotate(0deg)");
$(".middle").css("display", "");
$(".bottom").css(
"transform",
"translateY(0px) translateX(0) rotate(0deg)"
);
hamburgerClicked = false;
}
$("#overlay").toggleClass("active");
$("#overlay").toggleClass("open");
});
});
CSS:
* {
box-sizing: border-box;
list-style: none;
}
html {
height: 100%;
scroll-behavior: smooth;
}
body {
height: 100%;
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;
}
section {
height: 100vh;
transform: translateY(40vh);
will-change: transform;
transform: translateY(30vh);
transition-timing-function: .2s all, cubic-bezier(0.22, 0.44, 0, 1);
text-decoration: none;
scroll-behavior: smooth;
}
.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;
-moz-animation: move-twink-back 16s infinite;
-o-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;
}
}
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;
}
.button-container {
position: fixed;
top: 5%;
right: 2%;
height: 27px;
width: 35px;
cursor: pointer;
z-index: 100;
transition: opacity 0.25s ease;
opacity: 1;
content: "";
}
.button-container:hover {
opacity: 0.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 0.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: 0.6;
visibility: hidden;
transition: opacity 0.35s, visibility 0.35s, height 0.35s;
}
li {
animation: fadeInRight 0.5s ease forwards;
animation-delay: 0.35s;
}
li:nth-of-type(2) {
animation-delay: 0.4s;
}
li:nth-of-type(3) {
animation-delay: 0.45s;
}
li:nth-of-type(4) {
animation-delay: 0.5s;
}
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: 0.35s;
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
.active {
visibility: visible;
}
#section1 {
background: rgba(0, 0, 0, 0);
height: 100vh;
}
#section1 {
:nth-child(1) {
padding-top: 0px;
display: flex;
}
}
#crstal-animation {
overflow: hidden;
display: block;
}
.crystal {
width: 25%;
position: absolute;
top: -46px;
left: 40%;
margin: 0;
margin-right: -50%;
transform-style: preserve-3d;
-webkit-animation: rotation 8s infinite linear;
-moz-animation: rotation 8s infinite linear;
-o-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));
}
}
#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);
-moz-filter: drop-shadow(5px 5px 5px #222);
-o-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
}
aside {
display: block;
}
#section3 {
background: rgba(0, 0, 0, 0);
height: 100vh;
}
#section3:nth-child(2) {
display: flex;
align-items: center;
justify-content: center;
}
.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);
}
#section3-content {
padding-right: 100px;
padding-left: 100px;
margin-top: -90px;
overflow: hidden;
transition-timing-function: ease;
transition: .3s;
}
.intro h3 {
font-family: 'Gabriela', serif;
}
.content-text {
background: rgba(0, 0, 0, 0.8);
position: relative;
padding-bottom: 30px;
padding-left: 20px;
}
.constellation-img {
opacity: .35;
width: 50%;
float: left;
top: -80px;
position: relative;
}
.constellation-star {
width: 56%;
opacity: 1;
float: left;
left: 1%;
margin-top: -80px;
position: absolute;
}
.intro {
float: right;
width: 50%;
top: 40%;
padding-top: 30px;
padding-bottom: 10px;
padding-right: 100px;
color: floralwhite;
}
.constellation-pattern {
width: 11%;
opacity: .9;
margin-left: -10px;
margin-bottom: -15px;
}
.intro p {
text-align: left;
font-size: .9em;
margin-bottom: 15px;
font-weight: 200;
}
.constellation-icon {
list-style: none;
padding: 0;
margin: 0;
display: block;
}
.constellation-icon li {
display: table-cell;
vertical-align: middle;
padding: 1px;
padding-top: 15px;
}
.constellation-button {
width: 50%;
}
.constellation-button:hover {
background: rgb(0, 0, 205, 0.7);
filter: brightness(3);
border-radius: 80px;
border: 2px solid rgb(0, 0, 205, 0.7);
}
.constellation-button:active {
background: rgb(0, 0, 205);
filter: grayscale(.2);
transition-timing-function: linear;
}
.constellation-star-aq {
width: 46%;
opacity: 1;
float: left;
left: 1%;
margin-top: -10px;
position: absolute;
}
.constellation-star-ca {
width: 36%;
opacity: 1;
float: left;
left: 1%;
margin-top: 30px;
margin-left: 40px;
position: absolute;
transform: rotate(16deg);
}
.constellation-img-ca {
opacity: .35;
width: 50%;
float: left;
top: -40px;
position: relative;
}
.constellation-star-ge {
width: 36%;
opacity: 1;
float: left;
left: 1%;
margin-top: 90px;
margin-left: 60px;
position: absolute;
transform: rotate(-3deg);
}
.constellation-img-leo {
opacity: .35;
width: 50%;
float: left;
top: -40px;
position: relative;
}
.constellation-star-leo {
width: 40%;
opacity: 1;
float: left;
left: 1%;
margin-top: 20px;
margin-left: 70px;
position: absolute;
transform: rotate(5deg);
}
.constellation-img-sc {
opacity: .35;
width: 50%;
float: left;
top: -20px;
position: relative;
}
#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%;
}
Here is a rough working demo on JSFiddle: https://jsfiddle.net/ha3c04yL/4/
I'm fairly new to front-end dev so please spare me...Anyway, for this codepen project I'm trying to get the animation where a stack of pancakes falls to the plate to activate when you click the button. It should be just an empty plate until the button is clicked.
Not sure why my JS code isn't working but if I target the pancake or stack class, the visuals still remain static.
HTML:
<div class="container">
<div class="plate">
<div class="inner-plate">
</div>
</div>
<button onclick="onclick()">Good Morning!</button>
<div class="stack">
<div class="pancake">
<div class="top-p"></div>
</div>
<div class="pancake p2">
<div class="top-p"></div>
</div>
<div class="pancake p3">
<div class="top-p"></div>
</div>
<div class="pancake p4">
<div class="top-p"></div>
</div>
<div class="pancake p5">
<div class="top-p"></div>
</div>
<div class="pancake p6">
<div class="top-p"></div>
<div class="butter">
<div class = "shadow"></div>
<div class = "top-b"></div>
<div class = "shine"></div>
</div>
</div>
</div>
CSS (snippet):
/*------BUTTON------*/
button {
display: inline-block;
border: none;
margin-top: 25%;
padding: 1em 2em;
/*CSS center element trick*/
position: absolute;
/* Gradient */
background: linear-gradient(90deg, #FF5F6D 0%, rgba(255, 195, 113, 0.88) 100%);
box-shadow: 0px 4px 10px rgba(255, 95, 109, 0.25);
border-radius: 40px;
/*text*/
position: relative;
text-transform: uppercase;
font-family: Montserrat, system-ui;
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 15px;
letter-spacing: 0.14px;
color: #fff;
cursor: pointer;
transition: all 0.1s linear;
}
button:hover {
transform: translateY(-6px);
background: linear-gradient(90deg, #FF777C 0%, #FFC487 100%);
box-shadow: 0px 6px 5px rgba(255, 95, 109, 0.25);
}
.plate {
position: relative;
width: 100%;
height: 100%;
background: #FFFFFF;
/* Stroke */
border: 1.25px solid #F9EADC;
border-radius: 50%;
box-shadow: 0px 4px 4px rgba(165, 75, 75, 0.15);
}
.inner-plate {
position: relative;
width: 75%;
height: 30px;
background: #FFFFFF;
/* Stroke */
border: 1.25px solid #F9EADC;
border-radius: 50%;
margin: 5px auto; /*stacked "plates" without flexboxes*/
}
/*------ELEMENTS TO ANIMATE------*/
.pancake {
display: inline-block;
position: absolute;
width: 65%;
height: 25%;
left: 18%;
top: 0;
background: #FFE68E;
border-radius: 50%;
z-index: 1;
}
.top-p {
position: absolute;
width: 95%;
height: 80%;
left: 2.25%;
background: linear-gradient(180deg, rgba(222, 159, 101, 0.75) 0%, #E09148 100%);
border-radius: 50%;
}
.slideIn {
-webkit-animation: slideIn 1s linear both;
animation: slideIn 1s linear both;
}
/*------ KEYFRAMES -----*/
#-webkit-keyframes slideIn {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
#-webkit-keyframes slideIn {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
#keyframes slideIn {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
JS:
$(function() {
$('button').onclick(function() {
$('.pancake').addClass('slideIn');
});
})
There are a bunch of things are not right, I've fixed them and marked them with FIX
$(function() {
$('button').click(function() {
// FIX: you forgot the dot
$('.pancake').addClass('slideIn');
});
});
#import url('https://fonts.googleapis.com/css?family=Montserrat:600&display=swap');
* {
outline: none;
/*NOTE: removing the blue outline for links and buttons is a terrible UI/UX decision for accessibility! Some folks do not have the motor skills to use a mouse and use the alternative Tab button instead. This is purely just for show and practice :-) */
}
body {
position: relative;
height: 100vh;
padding: 0;
margin: 0;
background: #FDF6D0;
display: flex;
align-items: center;
text-align: center;
}
.container{
position: absolute;
margin-top: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
align-items: center;
}
/*------BUTTON------*/
button {
display: inline-block;
border: none;
margin-top: 25%;
padding: 1em 2em;
/*CSS center element trick*/
position: absolute;
/* Gradient */
background: linear-gradient(90deg, #FF5F6D 0%, rgba(255, 195, 113, 0.88) 100%);
box-shadow: 0px 4px 10px rgba(255, 95, 109, 0.25);
border-radius: 40px;
/*text*/
position: relative;
text-transform: uppercase;
font-family: Montserrat, system-ui;
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 15px;
letter-spacing: 0.14px;
color: #fff;
cursor: pointer;
transition: all 0.1s linear;
}
button:hover {
transform: translateY(-6px);
background: linear-gradient(90deg, #FF777C 0%, #FFC487 100%);
box-shadow: 0px 6px 5px rgba(255, 95, 109, 0.25);
}
.plate {
position: relative;
width: 100%;
height: 100%;
background: #FFFFFF;
/* Stroke */
border: 1.25px solid #F9EADC;
border-radius: 50%;
box-shadow: 0px 4px 4px rgba(165, 75, 75, 0.15);
}
.inner-plate {
position: relative;
width: 75%;
height: 30px;
background: #FFFFFF;
/* Stroke */
border: 1.25px solid #F9EADC;
border-radius: 50%;
margin: 5px auto; /*stacked "plates" without flexboxes*/
}
/*------ELEMENTS TO ANIMATE------*/
.pancake {
display: inline-block;
position: absolute;
width: 65%;
height: 25%;
left: 18%;
top: 0;
background: #FFE68E;
border-radius: 50%;
z-index: 1;
/*pancakes falling*/
-webkit-animation: slideIn 1s linear both;
animation: slideIn 1s linear both;
/* FIX: Pause the animation on start */
animation-play-state: paused;
}
/* FIX: Resume the animation when this class is added */
.slideIn {
animation-play-state: running;
}
.top-p {
position: absolute;
width: 95%;
height: 80%;
left: 2.25%;
background: linear-gradient(180deg, rgba(222, 159, 101, 0.75) 0%, #E09148 100%);
border-radius: 50%;
}
.p2 {
z-index: 2;
top: -7%;
left: 18%;
}
.p3 {
z-index: 3;
top: -14%;
left: 18%;
}
.p4 {
z-index: 4;
top: -21%;
left: 18%;
}
.p5 {
z-index: 5;
top: -28%;
left: 18%;
}
.p6 {
z-index: 6;
top: -35%;
left: 18%;
}
/*BUTTER*/
.shadow {
position: absolute;
z-index: 8;
top: -7%;
left: 42%;
height: 30%;
width: 15%;
margin: auto;
background: #FFDE68;
border-radius: 1px;
box-shadow: 1px 2px 2px rgba(202, 133, 65, 0.75);
transform: matrix(0.74, -0.44, 0.98, 0.77, 0, 0);
}
.top-b {
position: absolute;
z-index: 9;
top: -10%;
left: 45%;
height: 25%;
width: 10%;
margin: auto;
background: #FFEFB5;
border-radius: 1px;
transform: matrix(0.74, -0.44, 0.98, 0.77, 0, 0);
}
.shine{
position: absolute;
z-index: 10;
top: -4%;
left: 49%;
height: 7%;
width: 4%;
margin: auto;
background: #FFF;
border-radius: 1px;
transform: rotate(45deg);
}
.slideIn {
-webkit-animation: slideIn 1s linear both;
animation: slideIn 1s linear both;
}
/*------ KEYFRAMES -----*/
#-webkit-keyframes slideIn {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
#-webkit-keyframes slideIn {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
#keyframes slideIn {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
<!-- FIX: You forgot to import the jquery in CodePen! -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="container">
<div class="plate">
<div class="inner-plate">
</div>
</div>
<!-- FIX: You don't need to bind function here since you've already done it in js.-->
<button>Good Morning!</button>
<div class="stack">
<div class="pancake">
<div class="top-p"></div>
</div>
<div class="pancake p2">
<div class="top-p"></div>
</div>
<div class="pancake p3">
<div class="top-p"></div>
</div>
<div class="pancake p4">
<div class="top-p"></div>
</div>
<div class="pancake p5">
<div class="top-p"></div>
</div>
<div class="pancake p6">
<div class="top-p"></div>
<div class="butter">
<div class = "shadow"></div>
<div class = "top-b"></div>
<div class = "shine"></div>
</div>
</div>
</div>
the class identifier is wrong it should be $(".pancake")
$(function() {
$('button').onclick(function() {
$('.pancake').addClass('slideIn');
});
})
javascript
You need to add the class identifier . in $(".pancake")
$(function() {
$('button').click(function() {
$('.pancake').addClass('slideIn');
});
})
#import url('https://fonts.googleapis.com/css?family=Montserrat:600&display=swap');
* {
outline: none;
/*NOTE: removing the blue outline for links and buttons is a terrible UI/UX decision for accessibility! Some folks do not have the motor skills to use a mouse and use the alternative Tab button instead. This is purely just for show and practice :-) */
}
body {
position: relative;
height: 100vh;
padding: 0;
margin: 0;
background: #FDF6D0;
display: flex;
align-items: center;
text-align: center;
}
.container{
position: absolute;
margin-top: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
align-items: center;
}
/*------BUTTON------*/
button {
display: inline-block;
border: none;
margin-top: 25%;
padding: 1em 2em;
/*CSS center element trick*/
position: absolute;
/* Gradient */
background: linear-gradient(90deg, #FF5F6D 0%, rgba(255, 195, 113, 0.88) 100%);
box-shadow: 0px 4px 10px rgba(255, 95, 109, 0.25);
border-radius: 40px;
/*text*/
position: relative;
text-transform: uppercase;
font-family: Montserrat, system-ui;
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 15px;
letter-spacing: 0.14px;
color: #fff;
cursor: pointer;
transition: all 0.1s linear;
}
button:hover {
transform: translateY(-6px);
background: linear-gradient(90deg, #FF777C 0%, #FFC487 100%);
box-shadow: 0px 6px 5px rgba(255, 95, 109, 0.25);
}
.plate {
position: relative;
width: 100%;
height: 100%;
background: #FFFFFF;
/* Stroke */
border: 1.25px solid #F9EADC;
border-radius: 50%;
box-shadow: 0px 4px 4px rgba(165, 75, 75, 0.15);
}
.inner-plate {
position: relative;
width: 75%;
height: 30px;
background: #FFFFFF;
/* Stroke */
border: 1.25px solid #F9EADC;
border-radius: 50%;
margin: 5px auto; /*stacked "plates" without flexboxes*/
}
/*------ELEMENTS TO ANIMATE------*/
.pancake {
display: inline-block;
position: absolute;
width: 65%;
height: 25%;
left: 18%;
top: 0;
background: #FFE68E;
border-radius: 50%;
z-index: 1;
/*pancakes falling*/
-webkit-animation: slideIn 1s linear both;
animation: slideIn 1s linear both;
}
.top-p {
position: absolute;
width: 95%;
height: 80%;
left: 2.25%;
background: linear-gradient(180deg, rgba(222, 159, 101, 0.75) 0%, #E09148 100%);
border-radius: 50%;
}
.p2 {
z-index: 2;
top: -7%;
left: 18%;
}
.p3 {
z-index: 3;
top: -14%;
left: 18%;
}
.p4 {
z-index: 4;
top: -21%;
left: 18%;
}
.p5 {
z-index: 5;
top: -28%;
left: 18%;
}
.p6 {
z-index: 6;
top: -35%;
left: 18%;
}
/*BUTTER*/
.shadow {
position: absolute;
z-index: 8;
top: -7%;
left: 42%;
height: 30%;
width: 15%;
margin: auto;
background: #FFDE68;
border-radius: 1px;
box-shadow: 1px 2px 2px rgba(202, 133, 65, 0.75);
transform: matrix(0.74, -0.44, 0.98, 0.77, 0, 0);
}
.top-b {
position: absolute;
z-index: 9;
top: -10%;
left: 45%;
height: 25%;
width: 10%;
margin: auto;
background: #FFEFB5;
border-radius: 1px;
transform: matrix(0.74, -0.44, 0.98, 0.77, 0, 0);
}
.shine{
position: absolute;
z-index: 10;
top: -4%;
left: 49%;
height: 7%;
width: 4%;
margin: auto;
background: #FFF;
border-radius: 1px;
transform: rotate(45deg);
}
.slideIn {
-webkit-animation: slideIn 1s linear both;
animation: slideIn 1s linear both;
}
/*------ KEYFRAMES -----*/
#-webkit-keyframes slideIn {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
#-webkit-keyframes slideIn {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
#keyframes slideIn {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="plate">
<div class="inner-plate">
</div>
</div>
<button>Good Morning!</button>
<div class="stack">
<div class="pancake">
<div class="top-p"></div>
</div>
<div class="pancake p2">
<div class="top-p"></div>
</div>
<div class="pancake p3">
<div class="top-p"></div>
</div>
<div class="pancake p4">
<div class="top-p"></div>
</div>
<div class="pancake p5">
<div class="top-p"></div>
</div>
<div class="pancake p6">
<div class="top-p"></div>
<div class="butter">
<div class = "shadow"></div>
<div class = "top-b"></div>
<div class = "shine"></div>
</div>
</div>
</div>
Use following js (i remove animation from css .pancake class and add transform: translateY(-1000px); to it)
function onClick() {
[...document.querySelectorAll('.pancake')]
.map(x=> x.classList.add('slideIn'));
}
function onClick() {
[...document.querySelectorAll('.pancake')].map(x=> x.classList.add('slideIn'));
}
#import url('https://fonts.googleapis.com/css?family=Montserrat:600&display=swap');
* {
outline: none;
/*NOTE: removing the blue outline for links and buttons is a terrible UI/UX decision for accessibility! Some folks do not have the motor skills to use a mouse and use the alternative Tab button instead. This is purely just for show and practice :-) */
}
body {
position: relative;
height: 100vh;
padding: 0;
margin: 0;
background: #FDF6D0;
display: flex;
align-items: center;
text-align: center;
}
.container{
position: absolute;
margin-top: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
align-items: center;
}
/*------BUTTON------*/
button {
display: inline-block;
border: none;
margin-top: 25%;
padding: 1em 2em;
/*CSS center element trick*/
position: absolute;
/* Gradient */
background: linear-gradient(90deg, #FF5F6D 0%, rgba(255, 195, 113, 0.88) 100%);
box-shadow: 0px 4px 10px rgba(255, 95, 109, 0.25);
border-radius: 40px;
/*text*/
position: relative;
text-transform: uppercase;
font-family: Montserrat, system-ui;
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 15px;
letter-spacing: 0.14px;
color: #fff;
cursor: pointer;
transition: all 0.1s linear;
}
button:hover {
transform: translateY(-6px);
background: linear-gradient(90deg, #FF777C 0%, #FFC487 100%);
box-shadow: 0px 6px 5px rgba(255, 95, 109, 0.25);
}
.plate {
position: relative;
width: 100%;
height: 100%;
background: #FFFFFF;
/* Stroke */
border: 1.25px solid #F9EADC;
border-radius: 50%;
box-shadow: 0px 4px 4px rgba(165, 75, 75, 0.15);
}
.inner-plate {
position: relative;
width: 75%;
height: 30px;
background: #FFFFFF;
/* Stroke */
border: 1.25px solid #F9EADC;
border-radius: 50%;
margin: 5px auto; /*stacked "plates" without flexboxes*/
}
/*------ELEMENTS TO ANIMATE------*/
.pancake {
display: inline-block;
position: absolute;
width: 65%;
height: 25%;
left: 18%;
top: 0;
background: #FFE68E;
border-radius: 50%;
z-index: 1;
/*pancakes falling*/
transform: translateY(-1000px);
}
.top-p {
position: absolute;
width: 95%;
height: 80%;
left: 2.25%;
background: linear-gradient(180deg, rgba(222, 159, 101, 0.75) 0%, #E09148 100%);
border-radius: 50%;
}
.p2 {
z-index: 2;
top: -7%;
left: 18%;
}
.p3 {
z-index: 3;
top: -14%;
left: 18%;
}
.p4 {
z-index: 4;
top: -21%;
left: 18%;
}
.p5 {
z-index: 5;
top: -28%;
left: 18%;
}
.p6 {
z-index: 6;
top: -35%;
left: 18%;
}
/*BUTTER*/
.shadow {
position: absolute;
z-index: 8;
top: -7%;
left: 42%;
height: 30%;
width: 15%;
margin: auto;
background: #FFDE68;
border-radius: 1px;
box-shadow: 1px 2px 2px rgba(202, 133, 65, 0.75);
transform: matrix(0.74, -0.44, 0.98, 0.77, 0, 0);
}
.top-b {
position: absolute;
z-index: 9;
top: -10%;
left: 45%;
height: 25%;
width: 10%;
margin: auto;
background: #FFEFB5;
border-radius: 1px;
transform: matrix(0.74, -0.44, 0.98, 0.77, 0, 0);
}
.shine{
position: absolute;
z-index: 10;
top: -4%;
left: 49%;
height: 7%;
width: 4%;
margin: auto;
background: #FFF;
border-radius: 1px;
transform: rotate(45deg);
}
.slideIn {
-webkit-animation: slideIn 1s linear both;
animation: slideIn 1s linear both;
}
/*------ KEYFRAMES -----*/
#-webkit-keyframes slideIn {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
#-webkit-keyframes slideIn {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
#keyframes slideIn {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
<div class="container">
<div class="plate">
<div class="inner-plate">
</div>
</div>
<button onclick="onClick()">Good Morning!</button>
<div class="stack">
<div class="pancake">
<div class="top-p"></div>
</div>
<div class="pancake p2">
<div class="top-p"></div>
</div>
<div class="pancake p3">
<div class="top-p"></div>
</div>
<div class="pancake p4">
<div class="top-p"></div>
</div>
<div class="pancake p5">
<div class="top-p"></div>
</div>
<div class="pancake p6">
<div class="top-p"></div>
<div class="butter">
<div class = "shadow"></div>
<div class = "top-b"></div>
<div class = "shine"></div>
</div>
</div>
</div>