Hello My Question is how to stop the wheel rotation when the car come in the screen, Every time when any car come in screen please stop the wheel rotation.
Here My Code:
$(document).ready(function () {
$('.wheelEleContainer .slectWheel').click(function (e) {
e.preventDefault();
var getImgWheel = $(this).find('img').attr('src');
$('.car .wheelInCar').css('background-image',
'url(' + getImgWheel + ')'
);
});
var running = false;
$('.car-model').click(function (e) {
e.preventDefault();
var index = $(this).data("index");
var $pre = $('.car-image.current');
var $dom = $('.car-image[data-car-index="' + index + '"]');
if ($dom.hasClass("current") || running) {
return;
}
var current_pull = parseInt($('.current').css('transform').split(',')[5]);
running = true;
$dom.addClass('current');
$pre.addClass('left').removeClass('current');
setTimeout(function () {
if (current_pull == 0) {
$('.wheelInCar').css('animation-play-state', 'paused');
}
else {
$('.wheelInCar').css('animation-play-state', 'running');
}
$pre.addClass('no-transition');
$pre.removeClass('left');
setTimeout(function () {
$pre.removeClass('no-transition');
running = false;
}, 100);
}, 2100);
});
})
.car { /* My Container */
height: 600px;
padding: 40px 0;
background-color: #efefef;
overflow: hidden;
}
.car .click { /* Click Button */
width: 100%;
padding: 10px;
text-align: center;
border: 1px solid #0094ff;
margin-bottom: 30px;
}
.car-image { /* The Cars*/
position: absolute;
top: 100px;
margin-bottom: 30px;
transform: translate(calc(50vw + 400px), 0);
transition: all 2s ease-in-out;
//width:50vw;
}
.car .car-image.current /* When Click the current car will be animated to translate (0, 0) */ {
transform: translate(0, 0);
display: block;
}
.car .car-image.left /*When The Car go out of the screen */ {
transform: translate(calc(-50vw - 400px), 0);
display: block;
}
.car .car-image.no-transition {
transition: none; /* Remove the transition*/
}
.car .car-image .wheelInCar {
width: 99px;
height: 100px;
position: absolute;
background-repeat: no-repeat;
background-position: center center;
/* Rotating the Car Wheel, What I Need to stop the Wheel Animation When Car go into the screen but run Car Wheel when the car started to left the screen */
-webkit-animation: wheelRotating 2s linear infinite;
-moz-animation: wheelRotating 2s linear infinite;
-ms-animation: wheelRotating 2s linear infinite;
-o-animation: wheelRotating 2s linear infinite;
animation: wheelRotating 2s linear infinite;
}
.car .car-image .wheelInCar.left {
background-image: url('http://store6.up-00.com/2017-03/148992740531661.png');
top: 94px;
left: 98px;
}
.car .car-image .wheelInCar.right {
background-image: url('http://store6.up-00.com/2017-03/148992740544512.png');
top: 94px;
right: 75px;
}
.car .wheelEleContainer {
cursor: pointer;
}
/*Rotating Car Wheels*/
#keyframes wheelRotating {
from {
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
to {
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
-webkit-transform: rotate(0);
transform: rotate(0);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="car">
<div class="container">
<div class="row">
<div class="car-button-container">
<div class="col-md-2 col-md-offset-2 col-sm-3 col-xs-6">
<div class="click car-model" data-index="1">
Car Model 1
</div>
</div>
<div class="col-md-2 col-sm-3 col-xs-6">
<div class="click car-model" data-index="2">
Car Model 2
</div>
</div>
<div class="col-md-2 col-sm-3 col-xs-6">
<div class="click car-model" data-index="3">
Car Model 3
</div>
</div>
<div class="col-md-2 col-sm-3 col-s-6">
<div class="click car-model" data-index="4">
Car Model 4
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="row">
<div class="col-lg-7 col-lg-offset-2">
<div class="car-image current" data-car-index="1">
<img class="img-responsive" src="http://store6.up-00.com/2017-03/148992727111161.png" alt="" />
<div class="wheelInCar left"></div>
<div class="wheelInCar right"></div>
</div>
<div class="car-image" data-car-index="2">
<img class="img-responsive" src="http://store6.up-00.com/2017-03/148992727122822.png" alt="" />
<div class="wheelInCar left"></div>
<div class="wheelInCar right"></div>
</div>
<div class="car-image" data-car-index="3">
<img class="img-responsive" src="http://store6.up-00.com/2017-03/148992727131353.png" alt="" />
<div class="wheelInCar left"></div>
<div class="wheelInCar right"></div>
</div>
<div class="car-image" data-car-index="4">
<img class="img-responsive" src="http://store6.up-00.com/2017-03/148992727151114.png" alt="" />
<div class="wheelInCar left"></div>
<div class="wheelInCar right"></div>
</div>
</div>
</div>
<div class="row">
<div class="wheelEleContainer">
<div class="col-lg-1 col-lg-offset-2">
<div class="slectWheel">
<img src="http://store6.up-00.com/2017-03/148992740561243.png" alt="" />
</div>
</div>
<div class="col-lg-1">
<div class="slectWheel">
<img src="http://store6.up-00.com/2017-03/14899275127831.png" alt="" />
</div>
</div>
<div class="col-lg-1">
<div class="slectWheel">
<img src="http://store6.up-00.com/2017-03/148992740580684.png" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
Please Run code snippet in fullscreen
Try this code
$(document).ready(function () {
run();
$('.wheelEleContainer .slectWheel').click(function (e) {
e.preventDefault();
var getImgWheel = $(this).find('img').attr('src');
$('.car .wheelInCar').css('background-image',
'url(' + getImgWheel + ')'
);
});
var running = false;
$('.car-model').click(function (e) {
e.preventDefault();
var index = $(this).data("index");
var $pre = $('.car-image.current');
var $dom = $('.car-image[data-car-index="' + index + '"]');
if ($dom.hasClass("current") || running) {
return;
}
running = true;
$dom.addClass('current');
$pre.addClass('left').removeClass('current');
setTimeout(function () {
$pre.addClass('no-transition');
$pre.removeClass('left');
setTimeout(function () {
$pre.removeClass('no-transition');
running = false;
}, 100);
}, 2100);
run();
});
function run(){
$(".car-image.current").removeClass("in");
$(".car-image.current").removeClass("out");
setTimeout(function(){
$(".car-image.current").addClass("in");
},1000);
setTimeout(function(){
$(".car-image.current").addClass("out");
},5000);
}
})
.car{
height:600px;
padding:40px 0;
background-color:#efefef;
overflow:hidden;
}
.car .click{
width:100%;
padding:10px;
text-align:center;
border:1px solid #0094ff;
margin-bottom:30px;
}
.car-image {
position:absolute;
top: 100px;
margin-bottom: 30px;
-moz-transform: translate(160%, 0);
-ms-transform: translate(160%, 0);
-o-transform: translate(160%, 0);
-webkit-transform: translate(160%, 0);
transform: translate(160%, 0);
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}
.car .car-image.current {
display:block;
transform: translateX(200%);
transition:all 1s ease;
}
.car .car-image.left {
-moz-transform: translate(-160%,0);
-ms-transform: translate(-160%,0);
-o-transform: translate(-160%,0);
-webkit-transform: translate(-160%,0);
transform: translate(-160%,0);
display:block;
}
.car .car-image.no-transition {
transition:none;
}
.car .car-image .wheelInCar{
width:99px;
height:100px;
position:absolute;
background-repeat:no-repeat;
background-position:center center;
}
.car .car-image .wheelInCar.left{
background-image:url('http://store6.up-00.com/2017-03/148992740531661.png');
top:94px;
left:98px;
}
.car .car-image .wheelInCar.right{
background-image:url('http://store6.up-00.com/2017-03/148992740544512.png');
top:94px;
right:75px;
}
.car .wheelEleContainer{
cursor:pointer;
}
.car .car-image.current.in{
transform:translateX(100px);
transition:all 2.6s ease-in;
}
.car .car-image.current.out{
transform:translateX(-200%);
transition:all 2.6s ease-out;
}
.car .car-image.current.in .wheelInCar{
animation: wheelRotatingIn 2s ease-in 1.3;
}
.car .car-image.current.out .wheelInCar{
animation: wheelRotatingOut 2s ease-out 1.3;
}
#keyframes wheelRotatingIn {
0% { -webkit-transform: rotate(0deg); }
50% { -webkit-transform: rotate(800deg); }
100% { -webkit-transform: rotate(1000deg); }
}
#keyframes wheelRotatingOut {
0% { -webkit-transform: rotate(0deg); }
50% { -webkit-transform: rotate(800deg); }
100% { -webkit-transform: rotate(1600deg); }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="car">
<div class="container">
<div class="row">
<div class="car-button-container">
<div class="col-xs-6 col-sm-3 col-md-2 col-md-offset-2 ">
<div class="click car-model" data-index="1">
Car Model 1
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-2">
<div class="click car-model" data-index="2">
Car Model 2
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-2">
<div class="click car-model" data-index="3">
Car Model 3
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-2">
<div class="click car-model" data-index="4">
Car Model 4
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="row">
<div class="col-lg-7 col-lg-offset-2">
<div class="car-image current" data-car-index="1">
<img class="img-responsive" src="http://store6.up-00.com/2017-03/148992727111161.png" alt="" />
<div class="wheelInCar left"></div>
<div class="wheelInCar right"></div>
</div>
<div class="car-image" data-car-index="2">
<img class="img-responsive" src="http://store6.up-00.com/2017-03/148992727122822.png" alt="" />
<div class="wheelInCar left"></div>
<div class="wheelInCar right"></div>
</div>
<div class="car-image" data-car-index="3">
<img class="img-responsive" src="http://store6.up-00.com/2017-03/148992727131353.png" alt="" />
<div class="wheelInCar left"></div>
<div class="wheelInCar right"></div>
</div>
<div class="car-image" data-car-index="4">
<img class="img-responsive" src="http://store6.up-00.com/2017-03/148992727151114.png" alt="" />
<div class="wheelInCar left"></div>
<div class="wheelInCar right"></div>
</div>
</div>
</div>
<div class="row">
<div class="wheelEleContainer">
<div class="col-lg-1 col-lg-offset-2">
<div class="slectWheel">
<img src="http://store6.up-00.com/2017-03/148992740561243.png" alt="" />
</div>
</div>
<div class="col-lg-1">
<div class="slectWheel">
<img src="http://store6.up-00.com/2017-03/14899275127831.png" alt="" />
</div>
</div>
<div class="col-lg-1">
<div class="slectWheel">
<img src="http://store6.up-00.com/2017-03/148992740580684.png" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
One liner to the CSS:
.car .car-image .wheelInCar {
width: 99px;
height: 100px;
position: absolute;
background-repeat: no-repeat;
background-position: center center;
-webkit-animation: wheelRotating 2s linear infinite;
-moz-animation: wheelRotating 2s linear infinite;
-ms-animation: wheelRotating 2s linear infinite;
-o-animation: wheelRotating 2s linear infinite;
animation: wheelRotating 2s linear infinite;
animation-play-state: paused; /* Not exactly one line if you want to make compatible with prefixes */
}
Related
I have CSS placeholders/skeleton animations and some content in PHP and HTML. I want to show these placeholders when the page is initially opened (even before it finishes loading) and hide them when the page is fully loaded to show the content to show the content.
My html content include carousels and cards that hold data from the database.
.placeholder {
display: inline-block;
min-height: 1em;
vertical-align: middle;
cursor: wait;
background-color: currentColor;
opacity: .5;
border-radius: 50px;
}
.placeholder.btn::before {
display: inline-block;
content: ""
}
.placeholder-xs {
min-height: .6em
}
.placeholder-sm {
min-height: .8em
}
.placeholder-lg {
min-height: 1.2em
}
.placeholder-xl {
min-height: 6rem;
border-radius: 6px !important;
}
.placeholder-ml {
min-height: 4rem;
border-radius: 6px !important;
}
.placeholder-glow .placeholder {
-webkit-animation: placeholder-glow 2s ease-in-out infinite;
animation: placeholder-glow 2s ease-in-out infinite
}
#-webkit-keyframes placeholder-glow {
50% {
opacity: .2
}
}
#keyframes placeholder-glow {
50% {
opacity: .2
}
}
.placeholder-wave {
-webkit-mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%);
mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%);
-webkit-mask-size: 200% 100%;
mask-size: 200% 100%;
-webkit-animation: placeholder-wave 2s linear infinite;
animation: placeholder-wave 2s linear infinite
}
#-webkit-keyframes placeholder-wave {
100% {
-webkit-mask-position: -200% 0%;
mask-position: -200% 0%
}
}
#keyframes placeholder-wave {
100% {
-webkit-mask-position: -200% 0%;
mask-position: -200% 0%
}
}
<div class="header-large-title">
<h1 class="title">Hello
<?php echo htmlspecialchars($_SESSION["lastname"]); ?>
</h1>
<?php
$countfarm = mysqli_query($data, "SELECT count(farm_active) as total from farmerfruit where farm_active = '1' AND farmer_id='" . $_SESSION['id'] . "'");
$totalcount = mysqli_fetch_assoc($countfarm);
?>
<h4 class="subtitle">You have
<a href="#" class="headerButton" data-toggle="modal" data-target="#ModalBasic">
<?php echo $totalcount['total']; ?> Ongoing
</a>
Farm Activities
</h4>
</div>
<div class="section full mt-3 mb-3 main-banner">
<div class="carousel-multiple owl-carousel owl-theme">
<div class="item">
<div class="card">
<a href="#" data-toggle="modal" data-target="#ModalBasic">
<h4 class="head-card">My Farm</h4>
<img src="assets/img/sample/photo/farm/1.png" class="card-img-top" alt="image">
</a>
</div>
</div>
<div class="item">
<div class="card">
<a href="#">
<h4 class="head-card">Training</h4>
<img src="assets/img/sample/photo/farm/2.png" class="card-img-top" alt="image">
</a>
</div>
</div>
<div class="item">
<div class="card">
<a href="shop.php">
<h4 class="head-card">Our Shop</h4>
<img src="assets/img/sample/photo/farm/3.png" class="card-img-top" alt="image">
</a>
</div>
</div>
<div class="item">
<div class="card">
<a href="#">
<h4 class="head-card">Trends</h4>
<img src="assets/img/sample/photo/farm/4.png" class="card-img-top" alt="image">
</a>
</div>
</div>
</div>
</div>
Please help. Thank you
Here is a simple example. You can use window.onload to invoke a function when the page is loaded. Then you can add a class to <body> so that you will be able to change the CSS accordingly.
I just added a one second delay for the demonstration as this is a very small DOM and loads quickly.
window.onload = function(){
setTimeout(()=>{ // just for demo
document.body.classList.add('loaded');
}, 1000)
};
.container{
width:50%;
margin-bottom:10px
}
.placeholder {
animation: skeleton 1s linear infinite alternate;
}
.placeholder .content{
visibility: hidden
}
#keyframes skeleton {
0% {
background-color: hsl(200, 20%, 80%);
}
100% {
background-color: hsl(200, 20%, 95%);
}
}
body.loaded .placeholder{
animation: none
}
body.loaded .placeholder .content{
visibility: visible
}
<div class="container placeholder">
<div class="content">
I'm Loaded<br />Place holder is gone...<br />...
</div>
</div>
<div class="container placeholder">
<div class="content">I'm smaller</div>
</div>
I'm trying to animate some inner text and image inside the slider ,
it works nice for the first slide first time it render,
but from the second slide it does weird behavior,
the element is appear in normal with no animation then its start to animate.
i don't use carousel caption instead i use my on styled tags to add text.
this is the component :
import React, { useState } from "react";
import { Row, Col } from "react-bootstrap";
import Carousel from "react-bootstrap/Carousel";
import athletImg from "../../../assets/img/products_carousel/athlet.webp";
import athletProduct from "../../../assets/img/products_carousel/iv__NAC.jpg";
import "./productsMainCarousel.css";
const ProductsMainCarousel = () => {
const [index, setIndex] = useState(0);
const handleSelect = (selectedIndex, e) => {
setIndex(selectedIndex);
};
return (
<Carousel
className="products_main_carousel"
activeIndex={index}
onSelect={handleSelect}
variant="dark"
>
<Carousel.Item>
<Row>
<Col md={6}>
<img className="d-block w-100" src={athletImg} alt="First slide" />
</Col>
<Col
md={6}
className="d-flex flex-column justify-content-center px-5"
>
<div className="m-5">
<div className="d-flex justify-content-start">
<img
src={athletProduct}
className="scale-up-center product_img mb-3"
alt="product_img"
/>
</div>
<h1 className="slide-left">Workout Boost</h1>
<p>
Whether you are getting ready for a marathon or you just
finished a bootcamp class, this treatment can give you the
energy you need to perform...
</p>
<div className="mt-3">
<h6>INCLUDES:</h6>
<div className="includes">
<div className="includes_squre"></div>
Normal Saline
</div>
<div className="includes">
<div className="includes_squre"></div>
Glutamine: Amino Acid
</div>
<div className="includes">
<div className="includes_squre"></div>
Vitamin B12
</div>
<div className="includes">
<div className="includes_squre"></div>
L-Arginine: Amino Acid
</div>
</div>
</div>
</Col>
</Row>
</Carousel.Item>
<Carousel.Item>
<Row>
<Col md={6}>
<img className="d-block w-100" src={athletImg} alt="First slide" />
</Col>
<Col
md={6}
className="d-flex flex-column justify-content-center px-5"
>
<div className="m-5">
<div className="d-flex justify-content-start">
<img
src={athletProduct}
className="scale-up-center product_img mb-3"
alt="product_img"
/>
</div>
<h1 className="slide-left">Workout Boost</h1>
<p>
Whether you are getting ready for a marathon or you just
finished a bootcamp class, this treatment can give you the
energy you need to perform...
</p>
<div className="mt-3">
<h6>INCLUDES:</h6>
<div className="includes">
<div className="includes_squre"></div>
Normal Saline
</div>
<div className="includes">
<div className="includes_squre"></div>
Glutamine: Amino Acid
</div>
<div className="includes">
<div className="includes_squre"></div>
Vitamin B12
</div>
<div className="includes">
<div className="includes_squre"></div>
L-Arginine: Amino Acid
</div>
</div>
</div>
</Col>
</Row>
</Carousel.Item>
{/* <Carousel.Item>
<img
className="d-block w-100"
src="holder.js/800x400?text=Second slide&bg=282c34"
alt="Second slide"
/>
<Carousel.Caption>
<h3>Second slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img
className="d-block w-100"
src="holder.js/800x400?text=Third slide&bg=20232a"
alt="Third slide"
/>
<Carousel.Caption>
<h3>Third slide label</h3>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
</p>
</Carousel.Caption>
</Carousel.Item> */}
</Carousel>
);
};
export default ProductsMainCarousel;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
this is the css:
.products_main_carousel .product_img{
height: 140px;
}
.includes{
display: flex;
/* justify-content: center; */
align-items: center;
}
.includes .includes_squre{
height: 10px;
width: 10px;
background: var(--main-color);;
margin-right: 8px;
}
.carousel-control-next,
.carousel-control-prev {
width: 8%;
}
.active .scale-up-center {
-webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
/* ----------------------------------------------
* Generated by Animista on 2022-5-29 11:14:4
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: #cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation scale-up-center
* ----------------------------------------
*/
#-webkit-keyframes scale-up-center {
0% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes scale-up-center {
0% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
/* ----------------------------------------------
* Generated by Animista on 2022-5-29 11:8:7
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: #cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation slide-left
* ----------------------------------------
*/
#-webkit-keyframes slide-left {
0% {
-webkit-transform: translateX(100px);
transform: translateX(100px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
#keyframes slide-left {
0% {
-webkit-transform: translateX(100px);
transform: translateX(100px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
.active .slide-left {
-webkit-animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
I have a card that can both hover and click; however, there is a minor glitch.
When the card is clicked and then hovered out from the front, the hover does not work as expected. It is flipping right back to the front. The hover is only properly implement from the back when hovered out.
what am I missing from the code to properly implement without the hover glitch?
Please help with this issue.
document.querySelector(".card-flip").classList.toggle("flip");
$('.card-flip').bind({
click: function() {
$('.card-flip .card').toggleClass('flip');
}
});
.card-flip {
-webkit-perspective: 1000px;
perspective: 1000px;
}
.card-flip:hover .flip, .card-flip.hover .flip {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.card-flip,
.front,
.back {
width: 100%;
height: 480px;
-webkit-transform-style: preserve-3d;
}
.flip {
transition: 0.6s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
}
.front,
.back {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
}
.back {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css'>
<section style="height:40px;"> </section>
</head>
<body>
<section>
<div class="container">
<div class="row">
<div class="col-sm-6 col-lg-4">
<!-- Card Flip -->
<div class="card-flip">
<div class="flip">
<div class="front">
<!-- front content -->
<div class="card">
<img class="card-img-top" data-src="holder.js/100px180/" alt="100%x180" style="height: 180px; width: 100%; display: block;" data-holder-rendered="true">
<div class="card-block">
<h4 class="card-title">Front Card</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<h4 class="card-title">Back Card</h4>
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
</div>
<img data-src="holder.js/100px180/?text=Image" alt="Image [100%x180]" data-holder-rendered="true" style="height: 180px; width: 100%; display: block;">
<div class="card-block">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
</div>
</div>
</div>
</section>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.4/holder.min.js'></script>
</body>
You will have to use mouse event.
Option 1:
Add mouseenter and mouseleave event. (Don't rely on CSS, add/remove flip class on mouse events)
document.querySelector(".card-flip").classList.toggle("flip");
$('.card-flip').bind({
click: function() {
$('.card-flip .flip').toggleClass('flip-hover');
},
mouseenter: function() {
$('.card-flip .flip').addClass('flip-hover');
},
mouseleave: function() {
$('.card-flip .flip').removeClass('flip-hover');
}
});
.card-flip {
-webkit-perspective: 1000px;
perspective: 1000px;
}
.card-flip .flip-hover {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.card-flip,
.front,
.back {
width: 100%;
height: 480px;
-webkit-transform-style: preserve-3d;
}
.flip {
transition: 0.6s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
}
.front,
.back {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
}
.back {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css'>
<section style="height:40px;"> </section>
</head>
<body>
<section>
<div class="container">
<div class="row">
<div class="col-sm-6 col-lg-4">
<!-- Card Flip -->
<div class="card-flip">
<div class="flip">
<div class="front">
<!-- front content -->
<div class="card">
<img class="card-img-top" data-src="holder.js/100px180/" alt="100%x180" style="height: 180px; width: 100%; display: block;" data-holder-rendered="true">
<div class="card-block">
<h4 class="card-title">Front Card</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<h4 class="card-title">Back Card</h4>
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
</div>
<img data-src="holder.js/100px180/?text=Image" alt="Image [100%x180]" data-holder-rendered="true" style="height: 180px; width: 100%; display: block;">
<div class="card-block">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
</div>
</div>
</div>
</section>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.4/holder.min.js'></script>
</body>
Here is a fiddle. https://jsfiddle.net/nimittshah/gjhcwvk8/
Option 2:
If you want to keep hover in CSS, you will still need mouseenter event. (add flip class on mouseenter)
//document.querySelector(".card-flip").classList.toggle("flip");
$('.card-flip').bind({
click: function() {
$('.card-flip .flip-me').removeClass('flip');
},
mouseenter: function(){
$('.card-flip .flip-me').addClass('flip');
}
});
.card-flip {
-webkit-perspective: 1000px;
perspective: 1000px;
transform: rotateY(0deg);
}
.card-flip:hover .flip, .card-flip.hover .flip {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.card-flip,
.front,
.back {
width: 100%;
height: 480px;
-webkit-transform-style: preserve-3d;
}
.flip-me {
transition: 0.6s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
}
.front,
.back {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
}
.back {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css'>
<section style="height:40px;"> </section>
</head>
<body>
<section>
<div class="container">
<div class="row">
<div class="col-sm-6 col-lg-4">
<!-- Card Flip -->
<div class="card-flip">
<div class="flip-me flip">
<div class="front">
<!-- front content -->
<div class="card">
<img class="card-img-top" data-src="holder.js/100px180/" alt="100%x180" style="height: 180px; width: 100%; display: block;" data-holder-rendered="true">
<div class="card-block">
<h4 class="card-title">Front Card</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<h4 class="card-title">Back Card</h4>
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
</div>
<img data-src="holder.js/100px180/?text=Image" alt="Image [100%x180]" data-holder-rendered="true" style="height: 180px; width: 100%; display: block;">
<div class="card-block">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
</div>
</div>
</div>
</section>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.4/holder.min.js'></script>
</body>
Check fiddle. https://jsfiddle.net/nimittshah/gjhcwvk8/1/
FYI, I have added new class flip-me on flip class.
:)
Trying to add an animation to the show / hide made with CSS. But not sure if possible, maybe I should do this with JS instead?
The paragraph is shown when hovering the div, but this does not have a smooth animation like I would want it to. Was primary looking for it to drop down or something.
However, the basic works. Would be glad if you took a look and decided if it should be made with JS instead. And incase how.
HTML
<div class="hover-to-show-link">
<a href="#">
<img src="#">
<h2>Logo</h2>
<p class="hover-to-show">text</p>
</a>
</div>
<div class="hover-to-show-link">
<a href="#">
<img src="#">
<h2>Profilering</h2>
<p class="hover-to-show">text</p>
</a>
</div>
<div class="hover-to-show-link">
<a href="#">
<img src="#">
<h2 >Profilering</h2>
<p class="hover-to-show">text</p>
</a>
</div>
<div class="hover-to-show-link">
<a href="#">
<img src="#">
<h2>Profilering</h2>
<p class="hover-to-show">text</p>
</a>
</div>
CSS
.hover-to-show {
display: none;
transition: all .2s ease-in-out;
}
.hover-to-show-link:hover .hover-to-show {
display:block;
transition: all .2s ease-in-out;
}
As #Paran0a said, display property cannot be animated, you can animate height or opacity for instead to make the transition works.
.hover-to-show {
opacity: 0;
transition: all .2s ease-in-out;
}
.hover-to-show-link:hover .hover-to-show {
opacity: 1;
transition: all .2s ease-in-out;
}
<div class="hover-to-show-link">
<a href="#">
<h2>Logo</h2>
<p class="hover-to-show">text</p>
</a>
</div>
<div class="hover-to-show-link">
<a href="#">
<h2>Profilering</h2>
<p class="hover-to-show">text</p>
</a>
</div>
<div class="hover-to-show-link">
<a href="#">
<h2 >Profilering</h2>
<p class="hover-to-show">text</p>
</a>
</div>
<div class="hover-to-show-link">
<a href="#">
<h2>Profilering</h2>
<p class="hover-to-show">text</p>
</a>
</div>
As mentioned before, Display cannot be animated.
I would use a combination of visibility and opacity to get the wanted result:
.hover-to-show
{
visibility:hidden;
opacity:0;
transition:opacity 0.5s linear;
}
.hover-to-show-link:hover .hover-to-show
{
display:block;
visibility:visible;
opacity:1;
}
For a more thorough explanation
Try this:
.hover-to-show {
visibility: hidden;
height: 0;
width: 0;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
}
.hover-to-show-link:hover .hover-to-show {
visibility: visible;
height: auto;
width: auto;
opacity: 1;
}
You can animate using purely CSS· with Keyframes, although I recommend using jQuery and slideUp / slideDown
.hover-to-show span {
opacity: 0;
position: absolute;
line-height: 20px;
transition: all .2s ease-in-out;
}
.hover-to-show {
position: relative;
display: block;
height: 0;
}
.hover-to-show-link:hover .hover-to-show span{
-webkit-animation: show 2s forwards; /* Safari 4+ */
-moz-animation: show 2s forwards; /* Fx 5+ */
-o-animation: show 2s forwards; /* Opera 12+ */
animation: show 2s forwards; /* IE 10+, Fx 29+ */
}
.hover-to-show-link:hover .hover-to-show {
-webkit-animation: grow 2s forwards; /* Safari 4+ */
-moz-animation: grow 2s forwards; /* Fx 5+ */
-o-animation: grow 2s forwards; /* Opera 12+ */
animation: grow 2s forwards; /* IE 10+, Fx 29+ */
}
#-webkit-keyframes show {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-moz-keyframes show {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-o-keyframes show {
0% { opacity: 0; }
100% { opacity: 1; }
}
#keyframes show {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-webkit-keyframes grow {
0% { height: 0; }
100% { height: 20px; }
}
#-moz-keyframes grow {
0% { height: 0; }
100% { height: 20px; }
}
#-o-keyframes grow {
0% { height: 0; }
100% { height: 20px; }
}
#keyframes grow {
0% { height: 0; }
100% { height: 20px; }
}
<div class="hover-to-show-link">
<a href="#">
<img src="http://dummyimage.com/100x4:3">
<h2>Logo</h2>
<p class="hover-to-show"><span>text</span></p>
</a>
</div>
<div class="hover-to-show-link">
<a href="#">
<img src="http://dummyimage.com/100x4:3">
<h2>Profilering</h2>
<p class="hover-to-show"><span>text</span></p>
</a>
</div>
<div class="hover-to-show-link">
<a href="#">
<img src="http://dummyimage.com/100x4:3">
<h2 >Profilering</h2>
<p class="hover-to-show"><span>text</span></p>
</a>
</div>
<div class="hover-to-show-link">
<a href="#">
<img src="http://dummyimage.com/100x4:3">
<h2>Profilering</h2>
<p class="hover-to-show"><span>text</span></p>
</a>
</div>
You can use Animate.css.
Usage
<head>
<link rel="stylesheet" href="animate.min.css">
</head>
<p class="hover-to-show animated infinite bounce">text</p>
If you don't care much about browsers compatibility, you can use CSS3 transition property. Can I use CSS3 Transitions? But display property can't be animated, you can use opacity instead.
.hover-to-show {
opacity: 0;
transition: all .2s ease-in-out;
}
.hover-to-show-link:hover .hover-to-show {
opacity: 1;
transition: all .2s ease-in-out;
}
If you have to take care of old browsers, like IE, you can use jQuery instead.
$('.hover-to-show-link').mouseover(function() {
this.find('.hover-to-show').fadeIn(200);
}).mouseleave(function() {
this.find('.hover-to-show').fadeOut(200);
});
This is a great question! jQuery offers some great tools for this such as .slideDown() and .slideUp(), however this of course requires the use of jQuery.
If you would like to use CSS, I would suggest animating the max-height property; just make sure to keep the value it grows to greater than the content of your paragraphs.
.hover-to-show {
overflow: hidden;
max-height: 0px;
-o-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.hover-to-show-link:hover .hover-to-show {
max-height: 50px;
}
<div class="hover-to-show-link">
<a href="#">
<img src="#">
<h2>Logo</h2>
<p class="hover-to-show">text</p>
</a>
</div>
<div class="hover-to-show-link">
<a href="#">
<img src="#">
<h2>Profilering</h2>
<p class="hover-to-show">text</p>
</a>
</div>
<div class="hover-to-show-link">
<a href="#">
<img src="#">
<h2>Profilering</h2>
<p class="hover-to-show">text</p>
</a>
</div>
<div class="hover-to-show-link">
<a href="#">
<img src="#">
<h2>Profilering</h2>
<p class="hover-to-show">text</p>
</a>
</div>
I have created the application where All divs are Flip Vertically on hover. I wanted to make it random without hover. How should I do that?
.vertical.flip-container {
position: relative;
float: left;
margin-left: 50px;
}
.vertical .back {
transform: rotateX(180deg);
}
.vertical.flip-container .flipper {
transform-origin: 100% 50px;
}
.vertical.flip-container:hover .flipper {
transform: rotateX(-180deg);
}
.flip-container {
perspective: 1000;
}
/* flip the pane when hovered */
.flip-container:hover .flipper,
.flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
width: 100px;
height: 100px;
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front,
.back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
<div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" style="background: red">
Rushikesh
</div>
<div class="back" style="background:green">
Jogle
</div>
</div>
</div>
<div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" style="background: red">
Rushikesh
</div>
<div class="back" style="background:green">
Jogle
</div>
</div>
</div>
<div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" style="background: red">
Rushikesh
</div>
<div class="back" style="background:green">
Jogle
</div>
</div>
</div>
Any suggestions would be thankful.
I simplified your markup and CSS quite a bit. Also gave it a more 3D look.
You can use setInterval to flip them hover:
http://jsfiddle.net/7x75466y/5/
var $flippers = $(".flip-container"),
qtFlippers = $flippers.length;
setInterval(function () {
$flippers.eq(Math.floor(Math.random()*qtFlippers)).toggleClass('hover');
}, 1000);
Here is a JSfiddle that selects a random tile, and applies an action to it at every second (using setTimeout). You can perform whatever action you like on the tile. Using jQuery
http://jsfiddle.net/7x75466y/2/
var containers = $(".flip-container")
setInterval(function() {
var target = containers.eq(Math.floor(Math.random() * containers.size()))
target.fadeToggle() //DO WHAT YOU WANT TO THE TARGET
}, 1000)