I've got an issue in Firefox.
This works in chrome, and safari and mobile.
When you click the card, it flips over, but you can still see the "click to flip" front facing part of the card when you click on it to flip it over. It shows up as upside-down text. I've tried targeting the css to hide/show when the card css has the class of "flipped", but it still won't disappear.
Again this is a Firefox issue. Any suggestions would be great.
$('.card').click(function(){
$(this).toggleClass('flipped');
});
.card-height2: {
height: 281px;
}
.flip {
-webkit-perspective: 800;
perspective: 800;
position: relative;
cursor: pointer;
}
.flip .card.flipped {
-webkit-transform: rotatex(-180deg);
transform: rotatex(-180deg);
background: transparent;
}
.flip .card {
height: 195px;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
transform-style: preserve-3d;
transition: 0.5s;
}
.flip .card .face {
-webkit-backface-visibility: hidden ;
backface-visibility: hidden ;
z-index: 2;
}
.flip .card .front {
position: absolute;
width: 100%;
z-index: 1;
background: #2B5168;
}
.flip .card .back {
-webkit-transform: rotatex(-180deg);
transform: rotatex(-180deg);
padding-left: 5%;
}
.flip .card .back2 {
-webkit-transform: rotatex(-180deg);
transform: rotatex(-180deg);
padding-left: 5%;
padding-bottom: 13%;
}
.inner {
margin:0px
!important;
}
div.card.card-1 {
height: 195px;
background: transparent;
background: #2B5168;
}
.s7-small {
font-size: 14px;
}
.s7-percents {
color: #80c3db;
font-size: 51px;
font-weight: 800;
margin: 0px;
}
.s7-heading1 {
font-size: 27px;
text-align: left;
margin-top: 55px;
margin-left: 50px;
}
.s7-heading2 {
font-size: 27px;
margin: 0px;
}
.s7-para {
font-size: 27px;
color: #85B9CE;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="row">
<div class="col-lg-6 p-0">
<div class="flip s7-card-1">
<div class="card card-1">
<div class="face front">
<div class="inner">
<p class="s7-heading1">Click to flip</p>
</div>
</div>
<div class="face back">
<div class="inner">
<p class="s7-small">Flipped!</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
http://jsbin.com/yobeweseri/edit?html,css,js,output
Add transform: rotateX(0deg); to the .face.front container.
See this answer: Backface-Visibility Not Working Properly in Firefox (Works in Safari)
Related
I have this in CSS
function focusCard(element) {
element.getElementsByClassName("front")[0].classList.toggle("show");
element.getElementsByClassName("back")[0].classList.toggle("show");
}
.box {
cursor: pointer;
width: 270px;
height: 170px;
}
.center {
display: flex;
justify-content: center;
align-items: center;
}
.front {
position: absolute;
width: 270px;
height: 170px;
background-color: #778da9;
transform: perspective(800px);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: all 0.5s;
overflow: hidden;
}
.box:hover .front,
.show {
transform: rotateX(180deg);
}
.back {
position: absolute;
width: 270px;
height: 170px;
background: #415a77;
transform: perspective(800px) rotateY(0deg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: all 0.5s;
flex-direction: column;
transform: rotateX(180deg);
}
.box:hover .back,
.show {
transform: rotateX(0deg);
}
<div class="container">
<div class="questions">
<div class="">
<div class="box" onclick="focusCard(this)">
<div class="front center">
<h2>Front #1</h2>
</div>
<div class="back center">
<p>Back #2</p>
</div>
</div>
</div>
</div>
</div>
On desktop devices works fine but on mobile devices doesnt work properly.
On mobile devices, it only works when I click on the front. Back appears, but does not go back to front when you click back. can anyone help me this problem?
Thanks for all tips & advice
The problem you're having has nothing to do with mobile event registration. The mobile can also handle click event without problems. It works fine for pc mainly because of :hover pseudo class.
It would make more sense that putting .show on .box instead of its children. You may also consider putting perspective on .box.
On top of that, you should add :hover only for a device that has a cursor, since after tapping the element on mobile, the :hover kept activated until you tap somewhere else.
/* make hover only works for pc */
#media (hover: hover) {
.box:hover .front {
transform: rotateX(180deg);
}
.box:hover .back {
transform: rotateX(0deg);
}
}
Here's a cleaned-up version for what you might want to achieve:
function focusCard(element) {
element.classList.toggle("show");
}
.box {
cursor: pointer;
width: 270px;
height: 170px;
perspective: 800px;
}
.center {
display: flex;
justify-content: center;
align-items: center;
}
.front {
position: absolute;
width: 270px;
height: 170px;
background-color: #778da9;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: all 0.5s;
overflow: hidden;
}
.back {
position: absolute;
width: 270px;
height: 170px;
background: #415a77;
transform: rotateY(0deg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: all 0.5s;
flex-direction: column;
transform: rotateX(-180deg);
}
/* make hover only works for pc */
#media (hover: hover) {
.box:hover .front {
transform: rotateX(180deg);
}
.box:hover .back {
transform: rotateX(0deg);
}
}
.show .front {
transform: rotateX(180deg);
}
.show .back{
transform: rotateX(0deg);
}
<div class="container">
<div class="questions">
<div class="">
<div class="box" onclick="focusCard(this)">
<div class="front center">
<h2>Front #1</h2>
</div>
<div class="back center">
<p>Back #2</p>
</div>
</div>
</div>
</div>
</div>
so I had troubles with this one for quite a long time and couldn't find a solution, will be glad if anyone could help me with it. So basically what I have troubles with: I have an image with hover made by icon, I want to get image Pop Up when this icon appears and user clicks on it.
Here's my JSFiddle:https://jsfiddle.net/rissutei/wqyd48mj/17/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="galleryPicture">
<img src="https://cdn.pixabay.com/photo/2017/02/08/17/24/fantasy-2049567__480.jpg" alt="">
<i class="fas fa-plus"></i>
</div>
<script src="https://kit.fontawesome.com/9df2c8dd8e.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
</body>
</html>
*{
margin:0;
padding:0;
}
img {
display: block;
max-width: 100%;
height: auto;
}
div.galleryPicture {
padding:20px;
margin-bottom: 35px;
position: relative;
&:hover img {
opacity: 0.8;
filter: brightness(40%);
}
i {
position: absolute;
top: 50%;
left: 35%;
border-radius: 50%;
font-size: 34px;
color: #ffffff;
width: 60px;
height: 60px;
line-height: 60px;
transform: translate(-50%, -35%) scale(0);
transition: transform 0.5s 0ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
&:hover i {
transform: translate(-50%, -50%) scale(1);
transition: all 300ms 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
}
So I need to be able to check if a specified id has a specific class, but I'm not completely sure on how to do that.
Here is my code. You can see my attempt at checking a id for a specific class in the homeTransition function.
function homeTransition()
{
if(document.getElementById("aboutContent").hasClass("animated fadeInUp")){
document.getElementById("aboutContent").className = " animated slideOutDown";
} else if(document.getElementById("projectsContent").hasClass("animated fadeInUp")){
document.getElementById("projectsContent").className = " animated slideOutDown";
} else if(document.getElementById("contactContent").hasClass("animated fadeInUp")){
document.getElementById("contactContent").className = " animated slideOutDown";
}
document.getElementById("astronaut").className = " animated fadeIn";
}
function aboutTransition()
{
document.getElementById("astronaut").className = " animated fadeOut";
document.getElementById("aboutContent").className = " animated fadeInUp";
document.getElementById("projectsContent").className = " animated fadeOutLeft";
document.getElementById("contactContent").className = " animated fadeOutLeft";
}
function projectsTransition()
{
document.getElementById("astronaut").className = " animated fadeOut";
document.getElementById("projectsContent").className = " animated fadeInUp";
document.getElementById("aboutContent").className = " animated fadeOutLeft";
document.getElementById("contactContent").className = " animated fadeOutLeft";
}
function contactTransition()
{
document.getElementById("astronaut").className = " animated fadeOut";
document.getElementById("contactContent").className = " animated fadeInUp";
document.getElementById("aboutContent").className = " animated fadeOutLeft";
document.getElementById("projectsContent").className = " animated fadeOutLeft";
}
//Menu
function expand(){
$(this).toggleClass("on");
$(".menu").toggleClass("active");
};
$(".button").on('click', expand);
body {
font-family: "Source Sans Pro", sans-serif;
color: #ccc;
z-index: -100;
background-color: black;
overflow: hidden;
}
#aboutContent {
position: fixed;
top: 0;
left: 0;
bottom: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
transition: all 250ms;
-webkit-transform: translateZ(0) translateX(-100%);
transform: translateZ(0) translateX(-100%);
background-color: #2b2b41;
z-index: -1;
}
#projectsContent {
position: fixed;
top: 0;
left: 0;
bottom: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
transition: all 250ms;
-webkit-transform: translateZ(0) translateX(-100%);
transform: translateZ(0) translateX(-100%);
background-color: #42424b;
z-index: -1;
}
#contactContent {
position: fixed;
top: 0;
left: 0;
bottom: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
transition: all 250ms;
-webkit-transform: translateZ(0) translateX(-100%);
transform: translateZ(0) translateX(-100%);
background-color: #353440;
z-index: -1;
}
.menu {
position: fixed;
top: 0;
left: 0;
bottom: 0;
padding: 0;
overflow: hidden;
background: rgba(45, 51, 54, 0.9);
width: 18%;
box-sizing: border-box;
transition: all 250ms;
-webkit-transform: translateZ(0) translateX(-100%);
transform: translateZ(0) translateX(-100%);
text-align:center;
box-shadow: 0 0 20px #000000;
}
.active {
transform: translateZ(0) translateX(0);
transform: translateZ(0) translateX(0);
-webkit-transition: 0.4s;
transition: 0.4s;
color: #e5e5e5;
}
h1 {
margin-top:60%;
font-size: 2.5em;
cursor: default;
}
ul {
padding:0;
list-style:none;
font-size:14px;
}
li {
padding:10px 10px;
}
a {
text-decoration:none;
padding:10px 15px;
color:#fff;
font-family:"Roboto";
font-size: 1.5em;
font-weight: 300;
}
a:hover {
text-decoration: line-through;
color: #0dffec;
}
.content {
position:relative;
width:300px;
}
.button {
width:20px;
height:40px;
margin:24% 36%;
padding: 14px;
cursor:pointer;
}
.line {
width: 40px;
height: 2px;
background-color: #fff;
transition: transform 0.3s ease, background 0.3s ease, opacity 0.3s ease, top 0.3s ease;
}
.line.first {
transform: translateX(-10px) translateY(22px) rotate(-90deg);
}
.line.second {
transform: translateX(-10px) translateY(19px) rotate(0deg);
}
.button.on .line.top {
transform: translateX(-10px) translateY(20px) rotate(45deg);
}
.button.on .line.bottom {
transform: translateX(-10px) translateY(17px)rotate(-45deg);
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro|Play|Raleway" rel="stylesheet">
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
</head>
<body>
<div id="wrapper">
<div class="menu">
<h1>Title</h1>
<ul>
<div id="home" onclick="homeTransition()"><li><i class="fa fa-home"></i> home</li></div>
<div id="about" onclick="aboutTransition()"><li><i class="fa fa-user"></i> about</li></div>
<div id="projects" onclick="projectsTransition()"><li><i class="fa fa-code"></i> projects</li></div>
<div id="contact" onclick="contactTransition()"><li><i class="fa fa-paper-plane"></i> contact</li></div>
</ul>
</div>
<div class="content">
<div class="button">
<div class="line first top"></div>
<div class="line second bottom"></div>
</div>
</div>
<div id="aboutContent">
</div>
<div id="projectsContent">
</div>
<div id="contactContent">
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script type="text/javascript" src="js/transition.js"></script>
<script type="text/javascript" src="js/background.js"></script>
</body>
</html>
You can check like this
document.getElementById("projectsContent").className.indexOf("animated") !== -1 // class exists on element
But for this you can check for only one class, if you want to check for multiple classes store the className in a variable and check for all of them or write a utility function.
EDIT:
As mentioned by #Jerinaw in comment you can also use the below code, which is much shorter than above if you don't need support for < ie10
document.getElementById("projectsContent").classList.contains("animated") // class exists on element
Use vanilla Javascript
document.querySelector('#aboutContent.myclass');
This reads: Select the element with the id (id selector #) aboutContent, and that has the class (class selector .) myClass.
Read up on
CSS selectors
querySelector
I'd also like to note that you seem to be mixing vanilla javascript and jQuery. Maybe you should read up on selecting elements with jQuery.
I'm trying to have a collection of cards/divs within a container. When a card/div is clicked, it should flip horizontally and expand to take up the entire space within the container (basically changing the size of the card/div to 100% x 100% when clicked). I'm unsure if this is possible or not, as all of the examples that I've seen out there typically involve the card/div remaining the same size.
Here's the fiddle I tried working with, but I can't get the basic flipping functionality: https://jsfiddle.net/4dazznb5/
$('.card').click(function(){
$(this).addClass('flipped').mouseleave(function(){
$(this).removeClass('flipped');
});
return false;
});
.cards {
width: 100%;
height: 100%;
background: gray;
padding: 10px;
box-sizing: border-box;
position: relative;
-webkit-perspective: 800;
perspective: 800;
}
.cards .card {
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
}
.flip .card .face {
width: 100%;
position: absolute;
-webkit-backface-visibility: hidden ;
z-index: 2;
}
.flip .card .front {
position: absolute;
z-index: 1;
background: black;
}
.flip .card .back {
-webkit-transform: rotatex(-180deg);
background: white;
}
.cards .card.flipped {
-webkit-transform: rotatex(-180deg);
}
.card {
width: 100%;
background: lightgray;
padding: 6px;
margin: 10px 0;
box-sizing: border-box;
cursor: pointer;
position: relative;
position: absolute;
transform-style: preserve-3d;
transition: transform 1s;
}
.card:nth-of-type(1) {
margin-top: 0;
}
.card figure {
margin: 0;
display: block;
position: absolute;
width: 100%;
backface-visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width: 400px; height: 600px;">
<div class="cards">
<div class="card">
<div class="face front">Card 1 Front</div>
<div class="face back">Card 2 Back</div>
</div>
<div class="card">
<div class="face front">Card 2 Front</div>
<div class="face back">Card 2 Back</div>
</div>
<div class="card">
<div class="face front">Card 3 Front</div>
<div class="face back">Card 3 Back</div>
</div>
</div>
</div>
Since Tambo's backfaces were better (allowing html content), I made this mix with our answers (tested with success on Mozilla and Chrome):
$('.card').click(function(){
if (!$(this).hasClass("flipped")) {
$( ".face" ).addClass( 'off' );
$( this ).children( ".face" ).removeClass( 'off' );
$( this ).parent( ".cards" ).addClass( 'big' );
$( this ).addClass('flipped');
} else {
$( ".face" ).removeClass( 'off' );
$( ".cards" ).removeClass( 'big' );
$( this ).removeClass('flipped');
}
});
body {
height:100vh;
width:100vw;
margin:0px;
}
#container {
position: relative;
background: skyblue;
height:100%;
width:60%;
overflow: hidden;
margin:auto;
}
.off {
color: rgba(0, 0, 0, 0.0) !important;
background: rgba(230, 230, 250, 0.0) !important;
-webkit-transition: all 2s; /* Safari */
transition: all 2s;
}
.cards {
-webkit-perspective: 900px;
-moz-perspective: 900px;
perspective: 900px;
width: 80%;
height: 20%;
position: absolute;
-webkit-transition: all 1s; /* Safari */
transition: all 1s;
margin-left: 10%;
margin-right: 10%;
}
.cards .card.flipped {
-webkit-transform: rotatex(-180deg);
-moz-transform: rotatex(-180deg);
transform: rotatex(-180deg);
height: 100%;
z-index: 100;
}
.cards .card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 1s; /* Safari */
transition: all 1s;
}
.cards .card .face {
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden ;
-moz-backface-visibility: hidden ;
backface-visibility: hidden ;
z-index: 2;
font-size: 2em;
font-family: arial, sans-serif;
text-align: center;
-webkit-transition: all 0.5s; /* Safari */
transition: all 0.5s;
}
.cards .card .front {
position: absolute;
background: tomato;
z-index: 1;
}
.cards .card .back {
-webkit-transform: rotatex(-180deg);
-moz-transform: rotatex(-180deg);
transform: rotatex(-180deg);
background: gold;
}
.cards .card .front,
.cards .card .back{
cursor: pointer;
}
.big {
height:100%;
width:100%;
top: 0% !important;
margin-left: 0%;
margin-right: 0%;
z-index:100;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=container>
<div class=cards style="top:0px">
<div class=card>
<div class="face front">
Card 1 Front
</div>
<div class="face back">
Card 1 Back
</div>
</div>
</div>
<div class=cards style="top:25%">
<div class=card>
<div class="face front">
Card 2 Front
</div>
<div class="face back">
Card 2 Back
</div>
</div>
</div>
<div class=cards style="top:50%">
<div class=card>
<div class="face front">
Card 3 Front
</div>
<div class="face back">
Card 3 Back
</div>
</div>
</div>
<div class=cards style="top:75%">
<div class=card>
<div class="face front">
Card 4 Front
</div>
<div class="face back">
Card 4 Back
</div>
</div>
</div>
</div>
Just add !important to the new 'flipped' class attributes overwrites the old ones. The javascript line $( ".item" ).not( this ).addClass( 'off' ) removes the other cards when one is selected. The absolute position let everything on its place. The active card have a higher z-index to ensures that other cards will not activate the 'mouseleave' trigger. UPDATE: finally working 100% on Mozilla and Chrome. ps: a click opens the card and another click closes it.
$('.item').click(function(){
if (!$(this).hasClass("flipped")) {
$( ".item" ).not( this ).addClass( 'off' );
$( this ).addClass('flipped');
} else {
$( ".item" ).removeClass( 'off' );
$( this ).removeClass('flipped');
}
});
.off {
color: rgba(0, 0, 0, 0.0) !important;
background: rgba(230, 230, 250, 0.0) !important;
}
.cards {
width: 100%;
height: 100%;
background: lavender;
position: relative;
-webkit-perspective: 900px;
perspective: 900px;
}
.flipped {
top: 0% !important;
height: 100% !important;
width: 100% !important;
-webkit-transform: rotatex(-180deg);
transform: rotatex(-180deg);
-webkit-transition: all 1s; /* Safari */
transition: all 1s;
color: rgba(0, 0, 0, 0.0);
z-index:100;
-webkit-transform-style: preserve-3d;
background: tomato;
}
.flipped:after {
content: 'More text on here.';
right: 0px;
bottom: 0px;
position: absolute;
top: 0px;
left: 0px;
color: rgba(0, 0, 0, 1.0);
-webkit-transform: rotatex(-180deg);
transform: rotatex(-180deg);
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
background: gold;
}
.card {
height: 22%;
width: 100%;
box-sizing: border-box;
cursor: pointer;
-webkit-transition: all 1s; /* Safari */
transition: all 1s;
display: block;
position: absolute;
background: tomato;
}
.aaa {
top:0%;
}
.bbb {
top:26%;
}
.ccc {
top:52%;
}
.ddd {
top:78%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width: 400px; height: 600px;">
<div class="cards">
<div class="card item aaa">
<div class="face front">Some text on here.</div>
</div>
<div class="card item bbb">
<div class="face front">Some text on here.</div>
</div>
<div class="card item ccc">
<div class="face front">Some text on here.</div>
</div>
<div class="card item ddd">
<div class="face front">Some text on here.</div>
</div>
</div>
</div>
Just play with Element.classList and CSS transitions
// Function to flip the card and expand the content
function flipMe() {
console.log(this.innerHTML);
var card = this.querySelector('.card');
card.classList.add('flipped');
// this handler will be executed every time the cursor is moved off the card
card.addEventListener("mouseout", function( event ) {
this.classList.remove('flipped');
}, false);
}
// Define our variables
var cardWrapper = document.querySelector('.cardWrapper');
cardWrapper.addEventListener("click", flipMe, false);
:root {
background: #CAC8CC;
}
.cardWrapper {
-webkit-perspective: 800;
-moz-perspective: 800;
perspective: 800;
width: 400px;
height: 300px;
position: relative;
margin: 100px auto;
}
.cardWrapper .card.flipped {
-webkit-transform: rotatex(-180deg);
-moz-transform: rotatex(-180deg);
transform: rotatex(-180deg);
height: 100%;
}
.cardWrapper .card {
width: 100%;
height: 100px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: .5s;
-moz-transition: .5s;
transition: .5s;
}
.cardWrapper .card .face {
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden ;
-moz-backface-visibility: hidden ;
backface-visibility: hidden ;
z-index: 2;
font-size: 4em;
text-align: center;
}
.cardWrapper .card .front {
position: absolute;
background: black;
color: white;
z-index: 1;
}
.cardWrapper .card .back {
-webkit-transform: rotatex(-180deg);
-moz-transform: rotatex(-180deg);
transform: rotatex(-180deg);
background-color: #0095ff;
}
.cardWrapper .card .front,
.cardWrapper .card .back{
cursor: pointer;
}
<div class=cardWrapper>
<div class=card>
<div class="face front">
Card 1 Front
</div>
<div class="face back">
Card 1 Back
</div>
</div>
</div>
I've been making a website that uses parallax very similar to how it's used in http://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/, and I've been trying to implement some jquery which will make the page automatically scroll to the bottom on page load. However, the command I am using does not move the scroll bar at all. I've tried this on static websites and it seems to work fine.
$(document).ready(function() {
$("html, body").animate({
scrollTop: $(document).height()
}, 2000);
return false;
});
My code (stripped of text) is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href='https://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
.email a {
color: #001F67;
text-decoration: none;
}
a {
text-decoration: none;
}
.title {
text-align: center;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: Black;
font-size: 6vmin;
}
.About {
text-align: center;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #001F67;
text-decoration: none;
font-size: 4vmin;
background-color: white;
}
.parallax {
height: 500px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
-webkit-perspective: 300px;
perspective: 300px;
}
.parallax__group {
position: relative;
height: 500px;
height: 100vh;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.parallax__layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.parallax__layer--fore {
-webkit-transform: translateZ(90px) scale(.7);
transform: translateZ(90px) scale(.7);
z-index: 1;
}
.parallax__layer--base {
-webkit-transform: translateZ(0);
transform: translateZ(0);
z-index: 4;
}
.parallax__layer--back {
-webkit-transform: translateZ(-300px) scale(2);
transform: translateZ(-550px) scale(3);
z-index: 3;
}
.parallax__group {
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}
body, html {
overflow: hidden;
}
body {
font: 100% / 1.5 Arvo;
}
* {
margin:0;
padding:0;
}
.parallax {
font-size: 200%;
}
#group2 {
z-index: 3;
}
#group2 .parallax__layer--back {
background: #FFFFFF;
}
#group3 {
z-index: 4;
}
#group3 .parallax__layer--base {
/*background: black;*/
}
</style>
<script>
$(document).ready(function() {
$("html, body").animate({
scrollTop: $(document).height()
}, 2000);
return false;
});
</script>
</head>
<body>
<div class="parallax">
<div id="group2" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
</div>
<div class="parallax__layer parallax__layer--back">
<div class="title"><strong>Example Text</strong></div>
</div>
</div>
<div id="group3" class="parallax__group">
<div class="parallax__layer parallax__layer--fore">
<div class="About">
<!-- design inspired by graham hicks -->
<p>
Example Text
<p>
Example Text
</p>
<p class = "email">
<br /> Example Text
</p>
</div>
</div>
<div class="parallax__layer parallax__layer--base">
</div>
</div>
</div>
</body>
</html>
Does anyone have any idea as to why this isn't working?
Change $("html, body") to $(".parallax") to get it working.
$(document).ready(function() {
$(".parallax").animate({
scrollTop: $(document).height()
}, 2000);
return false;
});
JSFiddle: https://jsfiddle.net/qs0vbbtx/