i have an html table and i want to flip vertically each row individually of the table to display a "front" and "back" data. the flip should occur every 10s.
this website is for displaying stocks from a website and i want a table showing recently updated stocks which flip(change) every 10s
<div class="row ">
<div id="draggable">
<div id="dashboard" class="shadow">
<div class="widget-inner loadable" id="a">
<div class="widget-inner loadable" id="b">
<div class="row" style="margin-top:-90px">
<div id="draggable">
<div id="dashboard" class="shadow">
<div class="widget-inner loadable" id="a">
{% for rec in stockrecent1 %}
<tr>
<td class="name">{{rec}}</td>
<td class="other">{{rec.currentprice}}</td>
<td class="other">{{rec.change}}</td>
<td class="other">{{rec.percent}}%</td>
<td class="other">{{rec.lastprice}}</td>
</tr>
{% endfor %}
</div>
<div class="widget-inner loadable" id="b">
{% for rec in stockrecent %}
<tr>
<td class="name">{{rec}}</td>
<td class="other">{{rec.currentprice}}</td>
<td class="other">{{rec.change}}</td>
<td class="other">{{rec.percent}}%</td>
<td class="other">{{rec.lastprice}}</td>
</tr>
{% endfor %}
</div></div></div></div>
.row:after {
content: "";
display: table;
clear: both;
}
#draggable {
position: relative;
margin: 10px auto;
width: 1550px;
height: 40px;
z-index: 1;
}
#dashboard {
-webkit-perspective: 1000;
perspective: 1000;
}
#dashboard {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 1.0s linear;
transition: all 1.0s linear;
}
.loadable {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#a{
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-webkit-animation: mymoveback 20s infinite;
animation: mymoveback 20s infinite;
}
#b {
display: block;
box-sizing: border-box;
padding: 10px;
color: black;
text-align: center;
-webkit-animation: mymove 20s infinite;
animation: mymove 20s infinite;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove {
40% {
-webkit-transform: rotateX(0deg);
}
50% {
-webkit-transform: rotateX(180deg);
}
90% {
-webkit-transform: rotateX(180deg);
}
100% {
-webkit-transform: rotateX(0deg);
}
}
#-webkit-keyframes mymoveback {
40% {
-webkit-transform: rotateX(-180deg);
}
50% {
-webkit-transform: rotateX(0deg);
}
90% {
-webkit-transform: rotateX(0deg);
}
100% {
-webkit-transform: rotateX(-180deg);
}
}
#keyframes mymove {
40% {
transform: rotateX(0deg);
}
50% {
transform: rotateX(180deg);
}
90% {
transform: rotateX(180deg);
}
100% {
transform: rotateX(0deg);
}
}
#keyframes mymoveback {
40% {
transform: rotateX(-180deg);
}
50% {
transform: rotateX(0deg);
}
90% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(-180deg);
}
}
this code is working normally for other elements but not working for table rows. i tried putting the for loop out of the <div class="widget-inner loadable" id="a"> but not working. Please suggest a fix or an alternative way to do this. flip is not necessary. i just wanted to change to content of the rows using animation
You can use display: table-row table-cell, to divs in place of tr td.
.row:after {
content: "";
display: table;
clear: both;
}
.tr { display: table-row;}
.td {display: table-cell;}
#draggable {
position: relative;
margin: 10px auto;
width: 1550px;
height: 40px;
z-index: 1;
}
#dashboard {
-webkit-perspective: 1000;
perspective: 1000;
}
#dashboard {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 1.0s linear;
transition: all 1.0s linear;
}
.loadable {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#a {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-webkit-animation: mymoveback 20s infinite;
animation: mymoveback 20s infinite;
}
#b {
display: block;
box-sizing: border-box;
padding: 10px;
color: black;
text-align: center;
-webkit-animation: mymove 20s infinite;
animation: mymove 20s infinite;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove {
40% {
-webkit-transform: rotateX(0deg);
}
50% {
-webkit-transform: rotateX(180deg);
}
90% {
-webkit-transform: rotateX(180deg);
}
100% {
-webkit-transform: rotateX(0deg);
}
}
#-webkit-keyframes mymoveback {
40% {
-webkit-transform: rotateX(-180deg);
}
50% {
-webkit-transform: rotateX(0deg);
}
90% {
-webkit-transform: rotateX(0deg);
}
100% {
-webkit-transform: rotateX(-180deg);
}
}
#keyframes mymove {
40% {
transform: rotateX(0deg);
}
50% {
transform: rotateX(180deg);
}
90% {
transform: rotateX(180deg);
}
100% {
transform: rotateX(0deg);
}
}
#keyframes mymoveback {
40% {
transform: rotateX(-180deg);
}
50% {
transform: rotateX(0deg);
}
90% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(-180deg);
}
}
<div class="row" style="">
<div id="draggable"></div>
<div id="dashboard" class="shadow">
<div class="widget-inner loadable" id="a">
{% for rec in stockrecent1 %}
<div class="tr">
<div class="td name">{{ rec }}</div>
<div class="td other">{{ rec.currentprice }}</div>
<div class="td other">{{ rec.change }}</div>
<div class="td other">{{ rec.percent }}%</div>
<div class="td other">{{ rec.lastprice }}</div>
</div>
{% endfor %}
</div>
<div class="widget-inner loadable" id="b">
{% for rec in stockrecent %}
<div class="tr">
<div class="td name">{{ rec }}</div>
<div class="td other">{{ rec.currentprice }}</div>
<div class="td other">{{ rec.change }}</div>
<div class="td other">{{ rec.percent }}%</div>
<div class="td other">{{ rec.lastprice }}</div>
</div>
{% endfor %}
</div>
</div>
</div>
Related
My idea is to create flipping card game. When user flip the card he receives the points, which are randomly generated. Okay, now the user can flip the card and check how much points he will receive, but I want to limit how many cards he can flip. For example, there are 4 cards now. Only 2 of them should be able to open. I'll be thankful for every advice.
$('.front').html('dd');
$('.card').each(function() {
$(this).on("click", function() {
$(this).addClass("flipped");
});
});
function getNumber() {
$('.card .back').each(function() {
var minNumber = 0;
var maxNumber = 2;
var randomnumber = Math.floor(Math.random() * (maxNumber + 1) + minNumber);
$(this).html(randomnumber);
});
}
getNumber();
.container {
width: 200px;
height: 260px;
float: left;
position: relative;
border: 1px solid #ccc;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
}
.card div {
display: block;
height: 100%;
width: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 140px;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card .front {
background: red;
}
.card .back {
background: blue;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.card.flipped {
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
<div class="card">
<div class="front"></div>
<div class="back"></div>
</div>
</section>
<section class="container">
<div class="card">
<div class="front"></div>
<div class="back"></div>
</div>
</section>
<section class="container">
<div class="card">
<div class="front"></div>
<div class="back"></div>
</div>
</section>
<section class="container">
<div class="card">
<div class="front"></div>
<div class="back"></div>
</div>
</section>
To limit the number of cards which can be flipped, add a condition to the click handler which checks how many cards there are with the class flipped. If two already exist then you can disallow any further clicks from having an effect.
Also note that you don't need the each() loop to add a click() handler to multiple elements. Similarly you don't need a loop to set the html(), just provide a function which returns the value to set. Try this:
$('.front').html('dd');
$('.card').on("click", function() {
if ($('.flipped').length < 2) {
$(this).addClass("flipped");
} else {
console.log('You already flipped two cards!');
}
});
function getNumber() {
var minNumber = 0;
var maxNumber = 2;
$('.card .back').html(function() {
return Math.floor(Math.random() * (maxNumber + 1) + minNumber);
});
}
getNumber();
.container {
width: 200px;
height: 260px;
float: left;
position: relative;
border: 1px solid #ccc;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
}
.card div {
display: block;
height: 100%;
width: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 140px;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card .front {
background: red;
}
.card .back {
background: blue;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.card.flipped {
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
<div class="card">
<div class="front"></div>
<div class="back"></div>
</div>
</section>
<section class="container">
<div class="card">
<div class="front"></div>
<div class="back"></div>
</div>
</section>
<section class="container">
<div class="card">
<div class="front"></div>
<div class="back"></div>
</div>
</section>
<section class="container">
<div class="card">
<div class="front"></div>
<div class="back"></div>
</div>
</section>
I have a test web app, trying different CSS solutions. I used the below CSS code as a background animation in my Ionic project.
Unfortunately, the code on Android stutters quite badly, and the low fps makes other functions in my app unusable & unstable. Please also find the original code link below.
Original code:
https://codepen.io/noahblon/pen/GKflw
I tried optimizing the code as per below to use hardware acceleration in app.
HTML Code
<div class="scene">
<div class="wrap">
<div class="wall wall-right"></div>
<div class="wall wall-left"></div>
<div class="wall wall-top"></div>
<div class="wall wall-bottom"></div>
<div class="wall wall-back"></div>
</div>
<div class="wrap">
<div class="wall wall-right"></div>
<div class="wall wall-left"></div>
<div class="wall wall-top"></div>
<div class="wall wall-bottom"></div>
<div class="wall wall-back"></div>
</div>
</div>
CSS Code:
Picture is locally stored as asset & is 800x400, 100KB.
.wall {
background-image: url('../assets/imgs/4.jpg');
background-size: cover;
//pointer-events: none;
position: absolute;
}
.scene {
// left: 50%; top: 50%;
left: 50%; top: 50%;
display: inline-block;
vertical-align: middle;
perspective: 5px;
// perspective-origin: 50% 50%;
position: absolute;
z-index: -10;
}
.wrap {
position: absolute;
width: 1000px;
height: 1000px;
left: -500px;
top: -500px;
transform-style: preserve-3d;
-webkit-animation: move 350s infinite linear;
-webkit-animation-fill-mode: forwards;
}
.wrap:nth-child(2){
-webkit-animation: move 350s infinite linear;
animation-delay: 6s;
}
.wall{
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
opacity: 0;
//animation: fade 350s infinite linear;
-webkit-animation: fade 350s infinite linear;
// -webkit-animation: fadeinout 4s linear forwards;
// animation: fadeinout 4s linear forwards;
animation-delay: 0;
}
.wrap:nth-child(2) .wall {
animation-delay: 6s;
}
.wall-right {
transform: rotate3d(0,1,0,90deg) translate3d(0,0,500px);
}
.wall-left {
transform: rotate3d(0,1,0,-90deg) translate3d(0,0,500px);
}
.wall-top {
transform: rotate3d(1,0,0,90deg) translate3d(0,0,500px);
}
.wall-bottom {
transform: rotate3d(1,0,0,-90deg) translate3d(0,0,500px);
}
.wall-back {
transform: rotate3d(1,0,0,180deg) translate3d(0,0,500px);
}
#-webkit-keyframes move {
0%{
-webkit-transform: translate3d(0,0,-500px) rotate(0deg);
}
100%{
-webkit-transform: translate3d(0,0,500px) rotate(0deg);
}
}
#keyframes move {
0%{
-webkit-transform: translate3d(0,0,-500px) rotate(0deg);
}
100%{
-webkit-transform: translate3d(0,0,500px) rotate(0deg);
}
}
#-webkit-keyframes fade {
0%{
opacity: 0;
}
25% {
opacity: 1;
}
75% {
opacity: 1;
}
100%{
opacity: 0;
}
}
#keyframes fade {
0%{
opacity: 0;
}
25% {
opacity: 1;
}
75% {
opacity: 1;
}
100%{
opacity: 0;
}
}
I am seeking a solution in optimizing the link provided or further using my edited code.
How would you optimize this animation for phone?
I'm looking to have multiple cards flip individually, but I'm not that well versed in jQuery/JS and I'm having issues with figuring out the code, and could use a little help. Also, the tiles aren't flipping back over when clicked.
$('.js-click').on('click', function() {
$('.card').not(this).removeClass('flipped');
$('.card').toggleClass('flipped');
});
$('.js-click1').on('click', function() {
$('.card').not(this).removeClass('flipped');
$('.card').toggleClass('flipped');
});
.flipContainer {
width: 260px;
height: 200px;
position: relative;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
}
.card div {
display: block;
height: 100%;
width: 100%;
line-height: 200px;
color: white;
text-align: center;
font-weight: bold;
font-size: 12px;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card .front {
background: red;
}
.card .back {
background: blue;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.card.flipped {
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="flipContainer">
<div class="card">
<button class="js-click">+</button>
<div class="front">Custom Installation</div>
<div class="back">Custom Installation details</div>
</div>
</section>
<section class="flipContainer">
<div class="card">
<button class="js-click1">+</button>
<div class="front">Custom Installation</div>
<div class="back">Custom Installation details</div>
</div>
</section>
Looks like the issue came from trying to find the appropriate .card element (looks like it was finding both of them) and then removing a class + toggling a class will always add it:
remove .flipped
toggle .flipped
.flipped is always added
so you'll never turn your cards back over.
Quick fix, look for the clicked element's parent() and target that...
$('.js-click').on('click', function() {
$(this).parent('.card').toggleClass('flipped');
});
.flipContainer {
width: 260px;
height: 200px;
position: relative;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
}
.card div {
display: block;
height: 100%;
width: 100%;
line-height: 200px;
color: white;
text-align: center;
font-weight: bold;
font-size: 12px;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card .front {
background: red;
}
.card .back {
background: blue;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.card.flipped {
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="flipContainer">
<div class="card">
<button class="js-click">+</button>
<div class="front">Custom Installation</div>
<div class="back">Custom Installation details</div>
</div>
</section>
<section class="flipContainer">
<div class="card">
<button class="js-click">+</button>
<div class="front">Custom Installation</div>
<div class="back">Custom Installation details</div>
</div>
</section>
First you'll want to give both cards the class of js-click so that you can target both of them with the same $('.js-click') selector. Then as you want to flip the target's .card, all you have to do is toggle the class flipped on $(this).parent().
This can be seen in the following:
$('.js-click').on('click', function() {
$(this).parent().toggleClass('flipped');
});
.flipContainer {
width: 260px;
height: 200px;
position: relative;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
}
.card div {
display: block;
height: 100%;
width: 100%;
line-height: 200px;
color: white;
text-align: center;
font-weight: bold;
font-size: 12px;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card .front {
background: red;
}
.card .back {
background: blue;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.card.flipped {
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="flipContainer">
<div class="card">
<button class="js-click">+</button>
<div class="front">Custom Installation</div>
<div class="back">Custom Installation details</div>
</div>
</section>
<section class="flipContainer">
<div class="card">
<button class="js-click">+</button>
<div class="front">Custom Installation</div>
<div class="back">Custom Installation details</div>
</div>
</section>
You are toggling the flipped class on all elements with .card what you need it to do it just for the associated elements like
$(this).closest('.card').toggleClass('flipped');
Moreover, you can reduce your code by assigning js-click class to both buttons
Here is snippet
$('.js-click').on('click', function() {
$(this).closest('.card').toggleClass('flipped');
});
.flipContainer {
width: 260px;
height: 200px;
position: relative;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
}
.card div {
display: block;
height: 100%;
width: 100%;
line-height: 200px;
color: white;
text-align: center;
font-weight: bold;
font-size: 12px;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card .front {
background: red;
}
.card .back {
background: blue;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.card.flipped {
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="flipContainer">
<div class="card">
<button class="js-click">+</button>
<div class="front">Custom Installation</div>
<div class="back">Custom Installation details</div>
</div>
</section>
<section class="flipContainer">
<div class="card">
<button class="js-click">+</button>
<div class="front">Custom Installation</div>
<div class="back">Custom Installation details</div>
</div>
</section>
I was trying to make a website for an upcoming event, using materialize css. Here's how I want the page to look (not exactly same. The images is for representation):
Here's my link to jsbin
body {
background: #0b1924;
}
/*Loading screen animation code begins*/
#load {
position: absolute;
width: 600px;
height: 36px;
left: 50%;
top: 40%;
margin-left: -300px;
overflow: visible;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
}
#load div {
position: absolute;
width: 20px;
height: 36px;
opacity: 0;
font-family: Helvetica, Arial, sans-serif;
font-size: 24px;
animation: move 2s linear infinite;
-o-animation: move 2s linear infinite;
-moz-animation: move 2s linear infinite;
-webkit-animation: move 2s linear infinite;
transform: rotate(180deg);
-o-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
color: #35C4F0;
}
#load div:nth-child(2) {
animation-delay: 0.2s;
-o-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
}
#load div:nth-child(3) {
animation-delay: 0.4s;
-o-animation-delay: 0.4s;
-webkit-animation-delay: 0.4s;
-webkit-animation-delay: 0.4s;
}
#load div:nth-child(4) {
animation-delay: 0.6s;
-o-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
-webkit-animation-delay: 0.6s;
}
#load div:nth-child(5) {
animation-delay: 0.8s;
-o-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
-webkit-animation-delay: 0.8s;
}
#load div:nth-child(6) {
animation-delay: 1s;
-o-animation-delay: 1s;
-moz-animation-delay: 1s;
-webkit-animation-delay: 1s;
}
#load div:nth-child(7) {
animation-delay: 1.2s;
-o-animation-delay: 1.2s;
-moz-animation-delay: 1.2s;
-webkit-animation-delay: 1.2s;
}
#keyframes move {
0% {
left: 0;
opacity: 0;
}
35% {
left: 41%;
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
}
65% {
left: 59%;
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
}
100% {
left: 100%;
-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
opacity: 0;
}
}
#-moz-keyframes move {
0% {
left: 0;
opacity: 0;
}
35% {
left: 41%;
-moz-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
}
65% {
left: 59%;
-moz-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
}
100% {
left: 100%;
-moz-transform: rotate(-180deg);
transform: rotate(-180deg);
opacity: 0;
}
}
#-webkit-keyframes move {
0% {
left: 0;
opacity: 0;
}
35% {
left: 41%;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
}
65% {
left: 59%;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
}
100% {
left: 100%;
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
opacity: 0;
}
}
#-o-keyframes move {
0% {
left: 0;
opacity: 0;
}
35% {
left: 41%;
-o-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
}
65% {
left: 59%;
-o-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
}
100% {
left: 100%;
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
opacity: 0;
}
}
/*
Loading screen animation ends here....
*/
/*FAB code begins*/
.fixed-action-btn,
.toolbar {
margin-top: 2%;
margin-left: 2%;
width: 100px;
height: 100px;
top: 23px;
left: 23px;
}
.btn-large i {
font-size: 2.5rem;
margin-top: 20%;
}
.slider {
position: relative;
display: block;
background-position: center;
background-repeat: no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Spark fest</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/materialize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
<link href="https://fonts.googleapis.com/css?family=Bungee+Shade" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Audiowide" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
</head>
<body>
<div id="load">
<div>g</div>
<div>n</div>
<div>i</div>
<div>d</div>
<div>a</div>
<div>o</div>
<div>L</div>
</div>
<div class="row hideBeforeLoad ">
<div class="fixed-action-btn toolbar hideBeforeLoad col s12">
<a class="btn-floating btn-large hideBeforeLoad" style="width: 100px; height:100px;">
<i class="large material-icons hideBeforeLoad" title="Loading..">reorder</i>
</a>
<ul class="hideBeforeLoad">
<li class="waves-effect waves-light hideBeforeLoad"><i class="material-icons tooltipped" data-position="right" data-delay="50" data-tooltip="HOME">home</i>
</li>
<li class="waves-effect waves-light hideBeforeLoad"><i class="material-icons tooltipped"data-position="right" data-delay="50" data-tooltip="EVENTS">event</i>
</li>
<li class="waves-effect waves-light hideBeforeLoad"><i class="material-icons tooltipped"data-position="right" data-delay="50" data-tooltip="WHEN?/WHERE?">location_on</i>
</li>
<li class="waves-effect waves-light hideBeforeLoad"><i class="material-icons tooltipped"data-position="right" data-delay="50" data-tooltip="CONTACT US">contacts</i>
</li>
</ul>
</div>
</div>
<section>
<div class="row">
<div class="slider">
<ul class="slides">
<li>
<img src="https://tctechcrunch2011.files.wordpress.com/2015/04/codecode.jpg">
<!-- random image -->
<div class="caption center-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img src="http://lorempixel.com/580/250/nature/2">
<!-- random image -->
<div class="caption left-align">
<h3>Left Aligned Caption</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img src="http://lorempixel.com/580/250/nature/3">
<!-- random image -->
<div class="caption right-align">
<h3>Right Aligned Caption</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img src="http://lorempixel.com/580/250/nature/4">
<!-- random image -->
<div class="caption center-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
</ul>
</div>
</section>
<script type="text/javascript">
$(window).on('load', function() {
$("#load").fadeOut("slow");;
});
$(window).on("pagebeforeload", function() {
$(".hideBeforeLoad").hide();
});
</script>
</body>
</html>
Here is how my output is when I run it on the browser:
Looks like the images are hidden. Is there any way I could tweak the code so that it looks as expected?
You have 0 opacity on all of the li elements.
.slider .slides li {
opacity: 0;
...
}
Change that and images will show up.
im trying to turn a div and than display another div i used javascript and it works but i want to apply it to more than 1 group of divs so i would like to work with classes and not id's.
var init = function() {
var card = document.getElementById('card');
document.getElementById('flip').addEventListener( 'click', function() {
card.toggleClassName('flipped');
}, false);
};
window.addEventListener('DOMContentLoaded', init, false);
var init = function() {
var card = document.getElementById('card');
document.getElementById('flipback').addEventListener( 'click', function() {
card.toggleClassName('flipped');
}, false);
};
window.addEventListener('DOMContentLoaded', init, false);
<section class="container">
<div id="card">
<figure class="front" id="flip"></figure>
<figure class="back" id="flipback">Bitpong was een project waarbij ik en een groep studenten een bedrijf</figure>
</div>
</section>
HTML
<div class="flip">
<div class="card">
<div class="face front"> Hello </div>
<div class="face back">
You turned me
</div>
</div>
</div>
jQuery
$(".flip").hover(function() {
$(this).find(".card").toggleClass("flipped");
return false;
});
CSS
.flip {
-webkit-perspective: 800;
-ms-perspective: 800;
-moz-perspective: 800;
-o-perspective: 800;
width: 240px;
height: 310px;
position: relative;
margin: 0px auto;
}
.flip .card.flipped {
transform: rotatey(-180deg);
-ms-transform: rotatey(-180deg);
/* IE 9 */
-moz-transform: rotatey(-180deg);
/* Firefox */
-webkit-transform: rotatey(-180deg);
/* Safari and Chrome */
-o-transform: rotatey(-180deg);
/* Opera */
}
.flip .card {
width: 200px;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
-moz-transform-style: preserve-3d;
-moz-transition: 0.5s;
-ms-transform-style: preserve-3d;
-ms-transition: 0.5s;
-o-transform-style: preserve-3d;
-o-transition: 0.5s;
transform-style: preserve-3d;
transition: 0.5s;
}
.flip .card .face {
width: 200px;
height: 100%;
position: absolute;
text-align: center;
backface-visibility: hidden;
/* W3C */
-webkit-backface-visibility: hidden;
/* Safari & Chrome */
-moz-backface-visibility: hidden;
/* Firefox */
-ms-backface-visibility: hidden;
/* Internet Explorer */
-o-backface-visibility: hidden;
/* Opera */
}
.flip .card .front {
position: absolute;
background: white;
}
.flip .card .back {
background: white;
transform: rotatey(-180deg);
-ms-transform: rotatey(-180deg);
/* IE 9 */
-moz-transform: rotatey(-180deg);
/* Firefox */
-webkit-transform: rotatey(-180deg);
/* Safari and Chrome */
-o-transform: rotatey(-180deg);
/* Opera */
}
https://jsfiddle.net/oxn1ccd9/
This will surely work. Happy Coding :)
$(function() {
$('.flip').click(function(e) {
e.preventDefault();
$(this).closest('.card').toggleClass('flipped');
});
});
.front, .back {
transition: transform 0.25s linear;
backface-visibility: hidden;
position: absolute;
color: #000;
top: 0;
left: 0;
}
.front {
background: #0f0;
z-index: 2;
transform: rotateY(0deg);
}
.back {
transform: rotateY(180deg);
background: #f00;
}
.flipped .front {
transform: rotateY(180deg);
}
.flipped .back {
transform: rotateY(0deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="container">
<div class="card">
<figure class="flip front">Lorem ipsum dolor sit amet</figure>
<figure class="flip back">Bitpong was een project waarbij ik en een groep studenten een bedrijf</figure>
</div>
</section>