I have a page flipper animation for a notebook styled divs:
http://jsfiddle.net/jdell64/c1ytu8mo/2/
$('#next').click(function () {
$('#card').toggleClass('flipped');
})
.container {
background: lightgray;
width: 500px;
height:500px;
margin: 0 auto;
perspective: 800px;
}
#card {
width: 50%;
height: 100%;
margin: 0 auto;
transform-style: preserve-3d;
}
#card > div {
position:absolute;
width:100%;
height: 50%;
background: rgba(255, 255, 255, 0.7);
top: 125px;
/* backface-visibility: hidden; */
transition: transform 1s, visibility 0.9s;
transform-origin: 50% 0%;
}
#card.flipped .front {
transform: rotateX(360deg);
transform-origin: 50% 0%;
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
<div id="card">
<div class="back">Back</div>
<div id="mid" class="mid">Middle</div>
<div id="front" class="front">Front</div>
</div>
</section>
<br/>
<br/>
<br/>
<br/>
<a id="back" href="#">back</a>
<a id="next" href="#">next</a>
The 'next' button seems to work, but it toggles the page back and forth. How would I get it to go 'next' in an endless loop, and have the previous page do the same?
Also, as an aside... I am not sure why my 'front' content has to be at the bottom.
More info
Based off of this article, I can do this:
$('#next').click(function () {
myBox = $('#card')
myBox.toggleClass('flipped');
myBox.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',
function (e) {
console.log('done!');
console.log(e);
// code to execute after transition ends
});
})
but it fires twice for some reason.
Update I got the 'next' button to work, but I can't figure out the back button:
http://jsfiddle.net/jdell64/u3aebu1L/5/
You simply toggle the flipped class, adding / removing would create a forth and back notion, but if you want to flip more elements, then the flipped class should stay on the card, but instead should go to the sub elements.
To answer your aside: z-index will solve reordering issues... otherwise the sub elements will simply be put over each other, thus the last one being on top.
$('#next').click(function () {
$('#card').addClass('flipped');
});
$('#back').click(function () {
$('#card').removeClass('flipped');
});
.container {
background: lightgray;
width: 500px;
height:500px;
margin: 0 auto;
perspective: 800px;
}
#card {
width: 50%;
height: 100%;
margin: 0 auto;
transform-style: preserve-3d;
}
#card > div {
position:absolute;
width:100%;
height: 50%;
background: rgba(255, 255, 255, 0.7);
top: 125px;
/* backface-visibility: hidden; */
transition: transform 1s, visibility 0.9s;
transform-origin: 50% 0%;
}
#card.flipped .front {
transform: rotateX(360deg);
transform-origin: 50% 0%;
visibility: hidden;
}
#card .front {
z-index: 2;
}
#card .mid {
z-index: 1;
}
#card div {
z-index: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
<div id="card">
<div id="front" class="front">Front</div>
<div id="mid" class="mid">Middle</div>
<div class="back">Back</div>
</div>
</section>
<br/>
<br/>
<br/>
<br/>
<a id="back" href="#">back</a>
<a id="next" href="#">next</a>
You should also switch the front class to the next page so the animation will always be the same because off that 'front' class
This is future you... I found a hacky solution:
http://jsfiddle.net/jdell64/u3aebu1L/
Basically, I added a .middle class to be for the other direction animation. I also added a noAnimate class to ignore animations.
.container {
background: lightgray;
width: 500px;
height:500px;
margin: 0 auto;
perspective: 800px;
}
#card {
width: 50%;
height: 100%;
margin: 0 auto;
transform-style: preserve-3d;
}
#card > div {
position:absolute;
width:100%;
height: 50%;
//background: rgba(255, 255, 255, 0.6);
top: 125px;
transform-origin: 50% 0%;
}
#card .front {
transition: transform 1s, visibility 0.9s;
}
#card .middle {
transition: visibility 0.1s, transform 1s;
}
#card.flipped .front {
transform: rotateX(360deg);
transform-origin: 50% 0%;
visibility: hidden;
}
#card.flopped .middle {
transform: rotateX(-360deg);
transform-origin: 50% 0%;
}
.noAnimate {
-moz-transition-property: none !important;
-webkit-transition-property: none !important;
-o-transition-property: none !important;
transition-property: none !important;
}
.front {
background: lightgreen;
}
.middle {
background: lightblue;
}
.back {
background: goldenrod;
}
Related
this question is newbie but i'm stuck in this thing. I hope someone can help me.
I have this code:
HTML:
<div class='zone11'>
<div class='book11'>
<div class='cover11'></div>
<div class='page11'></div>
<div class='page11'></div>
<div class='page11'></div>
<div class='page11'></div>
<div class='page11'></div>
<div class='last-page11'></div>
<div class='back-cover11'></div>
</div>
</div>
CSS:
.zone11{
height: 700px;
display: flex;
align-items: center;
justify-content: center;
perspective: 1000px;
}
.book11{
display: flex;
align-items: center;
cursor: pointer;
}
.book11:hover .cover11{
transform: rotateX(10deg) rotateY(-180deg);
}
.book11:hover .page11{
transform: rotateX(10deg) rotateY(-180deg);
z-index: 2;
}
.cover11{
z-index: 1;
transition: all 3.5s;
}
.back-cover11{
z-index: -3;
}
.cover11, .back-cover11{
height: 450px;
width: 360px;
background: #3f0035;
border-radius: 2px 20px 20px 2px;
position: absolute;
box-shadow: 1px 1px 10px gray;
transform: rotateX(10deg);
transform-origin: center left;
}
.page11{
height: 430px;
width: 350px;
background: white;
position: absolute;
border-radius: 2px 10px 10px 2px;
transform: rotateX(10deg);
transform-origin: center left;
z-index: -1;
}
.last-page11{
height: 430px;
width: 350px;
background: white;
position: absolute;
border-radius: 2px 10px 10px 2px;
transform: rotateX(10deg);
transform-origin: center left;
z-index: -2;
}
.page11:nth-child(2){
transition-duration: 3s;
}
.page11:nth-child(3){
transition-duration: 2.6s;
}
.page11:nth-child(4){
transition-duration: 2.2s;
}
.page11:nth-child(5){
transition-duration: 1.8s;
}
.page11:nth-child(6){
transition-duration: 1.4s;
}
.book11:hover .page11:nth-child(2){
transition-duration: 6s;
}
.book11:hover .page11:nth-child(3){
transition-duration: 5.6s;
}
.book11:hover .page11:nth-child(4){
transition-duration: 5.2s;
}
.book11:hover .page11:nth-child(5){
transition-duration: 4.8s;
}
.book11:hover .page11:nth-child(6){
transition-duration: 4.4s;
}
Now, this way I have an animation of a book that when you hover, it opens to one page (with 5 pages scrolling before you get there). I want to remove the hover and make sure that it opens and closes on click.
I removed the hover from the classes. For example the cover:
.cover11__open{
transform: rotateX(10deg) rotateY(-180deg);
}
And then in the javascript:
var cover11 = document.querySelector('.cover11');
var book11= document.querySelector('.book11');
book11.addEventListener( 'click', function() {
cover11.classList.toggle('cover11__open');
});
The latter thing has worked on other occasions but it doesn't work here. I also tried something else found on the internet but nothing. Thanks.
You can try adding this to your css:
.book11 .cover11__open {
transform: rotateX(10deg) rotateY(-180deg);
}
.book11__open .page11 {
transform: rotateX(10deg) rotateY(-180deg);
z-index: 2;
}
.book11__open .page11:nth-child(2) {
transition-duration: 6s;
}
.book11__open .page11:nth-child(3) {
transition-duration: 5.6s;
}
.book11__open .page11:nth-child(4) {
transition-duration: 5.2s;
}
.book11__open .page11:nth-child(5) {
transition-duration: 4.8s;
}
.book11__open .page11:nth-child(6) {
transition-duration: 4.4s;
}
and keep every hover removes/commented there is no need for it
and add this too in the javascript instead of the current onclick
book11.addEventListener( 'click', function() {
cover11.classList.toggle('cover11__open');
book11.classList.toggle('book11__open')//this is the added line.
});
basically I just added the classes .cover11__open and .book11__open to the css with the properties given to the hover. now when clicking on the cover these two classes get added/removed. and great animation btw.
I took this Pen: https://codepen.io/golle404/pen/BoqrEN and wanted to make it move every few seconds.
I tried this:
setTimeout(function() {
document.getElementById("move").style.transform = "rotateY(203deg)";
}, 2000);
but this moves the object once and I want to make the cube spin infinite with 3 stops.
So like the cube rotates to 203deg and should stay there for 2 seconds and move to 180deg for example - in a infinite loop.
Is there a way to do it ? Or is it not possible.
You can use a keyframe animation for this.
For example:
#keyframes rotation {
0%, 100% {
transform: rotateX(90deg) translateZ(-150px);
}
33.333% {
transform: translateZ(150px);
}
66.666% {
transform: rotateY(90deg) translateZ(150px);
}
}
And then you use it like this
.my-element {
animation: rotation 5s infinite;
}
Here it is in combination with your code from the codepen:
.container {
margin-top: 150px;
}
.news-grid {
width: 300px;
margin: auto;
}
.news-card {
width: 300px;
height: 300px;
perspective: 800px;
perspective-origin: 50% 50%;
outline: 1px solid blue;
}
.face>img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#experiment {
-webkit-perspective: 800px;
-webkit-perspective-origin: 50% 200px;
-moz-perspective: 800px;
-moz-perspective-origin: 50% 200px;
perspective: 800px;
perspective-origin: 50% 200px;
}
.cube {
position: relative;
margin: auto;
height: 300px;
width: 300px;
-webkit-transition: -webkit-transform 2s linear;
-webkit-transform-style: preserve-3d;
-moz-transition: -moz-transform 2s linear;
-moz-transform-style: preserve-3d;
transition: transform 2s linear;
transform-style: preserve-3d;
transform: rotateY(245deg);
animation: rotation 5s infinite;
}
.face {
position: absolute;
height: 260px;
width: 260px;
padding: 20px;
background-color: rgba(50, 50, 50, 0.7);
font-size: 27px;
line-height: 1em;
color: #fff;
border: 1px solid #555;
border-radius: 3px;
}
#keyframes rotation {
0%,
100% {
transform: rotateX(90deg) translateZ(-150px);
}
33.333% {
transform: translateZ(150px);
}
66.666% {
transform: rotateY(90deg) translateZ(150px);
}
}
<div class="container">
<div class="news-grid">
<div class="news-card">
<div class="cube">
<div class="face one"></div>
<div class="face two">
<img src="http://images.sixrevisions.com/2010/10/13-01_information_architecture_101_ld_img.jpg" alt="" /></div>
<div class="face three">
Information Architecture 101: Techniques and Best Practices
</div>
</div>
</div>
</div>
</div>
You need to use setInterval, not setTimeout
I have to make a site which presents a menu of desserts for a restaurant. I used JS to make a flip-book animation. My site should mainly be adapted for phones. The problem is that on the phone when I "open" the card, the left part of menu is off the screen and I cannot scroll to get it.
Can anyone help me?
var currentPage = 0;
$(".book").on("click", ".active", nextPage).on("click", ".flipped", prevPage);
$(".book").hammer().on("swipeleft", nextPage);
$(".book").hammer().on("swiperight", prevPage);
function prevPage() {
$(".flipped")
.last()
.removeClass("flipped")
.addClass("active")
.siblings(".page")
.removeClass("active");
}
function nextPage() {
$(".active")
.removeClass("active")
.addClass("flipped")
.next(".page")
.addClass("active")
.siblings();
}
html {
height: 100%;
}
body {
background-color: black;
margin: 0;
width: 100%;
height: 100%;
overflow: scroll;
}
.scene {
width: 560px;
height: 793px;
margin: 80px auto;
-webkit-perspective: 2000px;
perspective: 2000px;
}
.book {
position: relative;
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.page {
cursor: pointer;
position: absolute;
color: black;
width: 100%;
height: 100%;
-webkit-transition: 1.5s -webkit-transform;
transition: 1.5s transform;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;
}
.front,
.back {
position: absolute;
width: 100%;
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background: -webkit-gradient(
linear,
0% 0%,
100% 100%,
from(#ffffff),
to(#cccccc)
);
background: -webkit-gradient(
linear,
left top,
right bottom,
from(#fff),
to(#ccc)
);
background: -webkit-linear-gradient(top left, #fff, #ccc);
background: linear-gradient(to bottom right, #fff, #ccc);
}
.back {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.page.active {
z-index: 1;
}
.page.flipped {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.page.flipped:last-of-type {
z-index: 1;
}
p {
margin: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
</head>
<body>
<div class="scene">
<article class="book">
<section class="page active">
<div class="front">
<p><img src="https://via.placeholder.com/559x751.jpg?text=Page%20A"></p>
</div>
<div class="back">
<p><img src="https://via.placeholder.com/559x751.jpg?text=Page%20A%20Back"></p>
</div>
</section>
<section class="page">
<div class="front">
<p><img src="https://via.placeholder.com/559x751.jpg?text=Page%20B"></p>
</div>
<div class="back">
<p><img src="https://via.placeholder.com/559x751.jpg?text=Page%20B%20Back"></p>
</div>
</section>
</article>
</div>
</body>
</html>
Thank you in advance.
I am using an animated arrow with the following code:
function startDownload() {
alert("Hi");
}
.arrow {
cursor: pointer;
height: 120px;
position: relative;
transition: transform 0.1s;
width: 80px;
/*display: inline-block;*/
}
.arrow-top, .arrow-bottom {
background-color: #666;
height: 4px;
left: -5px;
position: absolute;
top: 50%;
width: 100%;
}
.arrow-top:after, .arrow-bottom:after {
background-color: #fff;
content: '';
height: 100%;
position: absolute;
top: 0;
transition: all 0.15s;
}
.arrow-top {
transform: rotate(45deg);
transform-origin: bottom right;
}
.arrow-top:after {
left: 100%;
right: 0;
transition-delay: 0s;
}
.arrow-bottom {
transform: rotate(-45deg);
transform-origin: top right;
}
.arrow-bottom:after {
left: 0;
right: 100%;
transition-delay: 0.15s;
}
.arrow:hover .arrow-top:after {
left: 0;
transition-delay: 0.15s;
}
.arrow:hover .arrow-bottom:after {
right: 0;
transition-delay: 0s;
}
.arrow:active {
transform: translateX(-50%) translateY(-50%) scale(0.9);
}
<style type="text/css">
body {
background-color: black;
/*background-color: #2B2A3F;*/
}
</style>
<div class="arrow" id="start-arrow" onclick="startDownload()" style="z-index: 10;">
<div class="arrow-top" style="border:1px solid black; z-index: 9;"></div>
<div class="arrow-bottom" style="border:1px solid black; z-index: 9;"></div>
</div>
The issue is that when I click on the two arrow lines, the onclick() does not work. It works only if I click in the surrounding area of the two lines, that is enclosed by the border of the parent div with id start-arrow.
The desired behavior is for the onclick to work in the entire area enclosed by the start-arrow div.
I tried using z-index to make the start-arrow div be on top, but it's not working. I tried messing with display and also with position of the elements in CSS but no luck as well. However I should mention that I'm looking for a solution that does not include changing the position attributes of the elements.
How can I make the onclick fire regardless of where I click in the start-arrow div area?
EDIT: it seems to be working a lot better inside Stack Overflow, why? However if a click on top of the border of each line, it doesn't always work. I am opening mine (exact same code) in Firefox (it doesn't work inside my asp.net either).
Why don't we simply wrap the elements into another parent element and bind the event on that? I am able to solve it using a parent element ('parent-id').
function startDownload() {
alert("Hi");
}
.arrow {
cursor: pointer;
height: 120px;
position: relative;
transition: transform 0.1s;
width: 80px;
/*display: inline-block;*/
}
.arrow-top, .arrow-bottom {
background-color: #666;
height: 4px;
left: -5px;
position: absolute;
top: 50%;
width: 100%;
}
.arrow-top:after, .arrow-bottom:after {
background-color: #fff;
content: '';
height: 100%;
position: absolute;
top: 0;
transition: all 0.15s;
}
.arrow-top {
transform: rotate(45deg);
transform-origin: bottom right;
}
.arrow-top:after {
left: 100%;
right: 0;
transition-delay: 0s;
}
.arrow-bottom {
transform: rotate(-45deg);
transform-origin: top right;
}
.arrow-bottom:after {
left: 0;
right: 100%;
transition-delay: 0.15s;
}
.arrow:hover .arrow-top:after {
left: 0;
transition-delay: 0.15s;
}
.arrow:hover .arrow-bottom:after {
right: 0;
transition-delay: 0s;
}
.arrow:active {
transform: translateX(-50%) translateY(-50%) scale(0.9);
}
<style type="text/css">
body {
background-color: black;
/*background-color: #2B2A3F;*/
}
</style>
<div id="parent-id" onclick="startDownload()">
<div class="arrow" id="start-arrow" style="z-
index: 10;">
<div class="arrow-top" style="border:1px solid black; z-index: 9;"></div>
<div class="arrow-bottom" style="border:1px solid black; z-index: 9;"></div>
</div>
</div>
let parent = document.getElementById("start-arrow");
for(let element of parent.children){
element.addEventListener("click", startDownload)
}
function startDownload() {
alert("Hi");
}
.arrow {
cursor: pointer;
height: 120px;
position: relative;
transition: transform 0.1s;
width: 80px;
/*display: inline-block;*/
}
.arrow-top, .arrow-bottom {
background-color: #666;
height: 4px;
left: -5px;
position: absolute;
top: 50%;
width: 100%;
}
.arrow-top:after, .arrow-bottom:after {
background-color: #fff;
content: '';
height: 100%;
position: absolute;
top: 0;
transition: all 0.15s;
}
.arrow-top {
transform: rotate(45deg);
transform-origin: bottom right;
}
.arrow-top:after {
left: 100%;
right: 0;
transition-delay: 0s;
}
.arrow-bottom {
transform: rotate(-45deg);
transform-origin: top right;
}
.arrow-bottom:after {
left: 0;
right: 100%;
transition-delay: 0.15s;
}
.arrow:hover .arrow-top:after {
left: 0;
transition-delay: 0.15s;
}
.arrow:hover .arrow-bottom:after {
right: 0;
transition-delay: 0s;
}
.arrow:active {
transform: translateX(-50%) translateY(-50%) scale(0.9);
}
<style type="text/css">
body {
background-color: black;
/*background-color: #2B2A3F;*/
}
</style>
<div class="arrow" id="start-arrow" onclick="startDownload()" style="z-index: 10;">
<div class="arrow-top" style="border:1px solid black; z-index: 9;"></div>
<div class="arrow-bottom" style="border:1px solid black; z-index: 9;"></div>
</div>
This is not the most optimize solution, but it should do the trick, other solution is to increase click box by adding it padding.
let parent = document.getElementById("filterInput");
for(let element of parent.children){
element.addEventListener("click", startDownload)
}
The problem is you're attaching a click event listener. That means if you want it to fire, the element needs to be clicked & released.
If you click on your element, it moves to the upper-left. Now if you're slow enough the element isn't below your mouse pointer anymore, thus the click event won't fire because you released the mouse somewhere below.
So simply replace
onclick="startDownload()"
by
onmousedown="startDownload()"
and make sure you don't have an alert dialog in the callback function since it would stop the movement of your arrow. Simply trace something using console.log("fired");
Do it with jquery. Use the id start-arrow
<div class="arrow" id="start-arrow" onclick="startDownload()" style="z-index: 10;">
<div class="arrow-top" style="border:1px solid black; z-index: 9;"></div>
<div class="arrow-bottom" style="border:1px solid black; z-index: 9;"></div>
</div>
Try this:
$(document).on('click','#start-arrow',function(){
alert('Hi');
});
I have two side front and back. By default front is displayed, when I hover over it it display the back(ie the other side). The problem is that it returns to front by itself, what i wanted to do is unless I hover over it I want the back side to remain as it is.(Rotate back fort on hover)
Here is a live example:
$(document).ready(function(){
$(".cube").mouseover(function(){
$(".cube").addClass('spin-cube');
});
$(".cube").mouseout(function(){
$(".cube").removeClass('spin-cube');
});
});
.wrap {
width: 100%;
height: 300px;
padding-top:50px;
clear: both;
perspective: 800px;
perspective-origin: 50% 100px;
}
.cube {
position: relative;
width: 200px;
transform-style: preserve-3d;
margin: 0 auto;
}
.cube div {
position: absolute;
width: 200px;
height: 200px;
}
.left {
background-color: #FFC250;
transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
.front {
background-color: #360;
z-index: 1000;
transform: translateZ(100px);
}
#keyframes spin {
from { transform: rotateY(0); }
to { transform: rotateY(90deg); }
}
.spin-cube {
animation: spin 2s linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="cube">
<div class="front">front</div>
<div class="left">left</div>
</div>
</div>
This solves the problem
$(".cube").mouseover(function(){
if($(".cube").hasClass("spin-cube-front")){
$(".cube").addClass('spin-cube-back');
$(".cube").removeClass('spin-cube-front');
}else{
$(".cube").removeClass('spin-cube-back');
$(".cube").addClass('spin-cube-front');
}
});
$(document).ready(function(){
$(".cube").mouseover(function(){
$(".cube").addClass('spin-cube');
});
$(".cube").mouseout(function(){
$(".cube").removeClass('spin-cube');
});
});
.wrap {
width: 100%;
height: 300px;
padding-top:50px;
clear: both;
perspective: 800px;
perspective-origin: 50% 100px;
}
.cube {
position: relative;
width: 200px;
transform-style: preserve-3d;
margin: 0 auto;
transition: transform 1s ease;
}
.cube div {
position: absolute;
width: 200px;
height: 200px;
}
.left {
background-color: #FFC250;
transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
.front {
background-color: #360;
z-index: 1000;
transform: translateZ(100px);
}
.spin-cube {
transform: rotateY(90deg);
}
This would be more easily done using a transition instead of an animation. Here is an example:
$(document).ready(function(){
var isClassy = false;
var cooldown = false;
$(".cube").mouseover(function(){
if (cooldown) return;
if (!isClassy) {
$(".cube").addClass('spin-cube');
isClassy = true;
} else {
$(".cube").removeClass('spin-cube');
isClassy = false;
}
cooldown = true;
setTimeout(function() {cooldown = false;}, 500);
});
});
.wrap {
width: 100%;
height: 300px;
padding-top:50px;
clear: both;
perspective: 800px;
perspective-origin: 50% 100px;
}
.cube {
position: relative;
width: 200px;
transform-style: preserve-3d;
margin: 0 auto;
transition: all 1s ease;
transform: rotateY(0deg);
}
.cube div {
position: absolute;
width: 200px;
height: 200px;
}
.left {
background-color: #FFC250;
transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
.front {
background-color: #360;
z-index: 1000;
transform: translateZ(100px);
}
.spin-cube {
transform: rotateY(90deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="cube">
<div class="front">front</div>
<div class="left">left</div>
</div>
</div>