I want the second layer background color to fade (opacity) and scale in the picture div2 .. trying to create something like http://fantasy.co/work
Here is the jsfiddle link
I could not post the whole code as I dont have enough points... Please follow the link and suggest what should do
The JQuery
$(document).ready(function() {
$(".background-color-container").css("opacity", 0.5);
$(".background-color-container").hover(function() {
$(this).animate({opacity: 1.0}, 500);
}, function() {
$(this).animate({opacity: 0.5}, 500);
});
});
use this logic in your solution Fiddler
div {
height: 200px;
width: 200px;
background: url('http://pimg.tradeindia.com/00288122/b/0/Our-Valuable-Client-List-Click-on-Image-.jpg');
background-size: 100% 100%;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
background-position: center center;
}
div:hover {
background-size: 150% 150%;
}
<div></div>
You can use directly css transition :
just add the :
#imgDemo:hover .div3 img{
transform: scale(1.25);
}
#imgDemo:hover .div2 img{
opacity: 0.5;
}
.div3 img {
transition: transform 0.3s ease-in;
}
.div2 img {
transition: opacity 0.3s ease-in;
}
below your worknig example :
.div1 {
position: relative;
width: 600px;
height: 400px;
background-color: red;
z-index: 99;
}
.div2 {
position: absolute;
width: 100%;
height: 100%;
}
.div2 img {
width: 100%;
height: 100%;
object-fit: cover;
}
.div3 {
position: absolute;
width: 100%;
height: 100%;
align-items: center;
}
.image-container {
justify-content: center;
height: 100%;
width: 100%;
align-items: center;
display: flex;
}
.image-container img {
width: 125px !important;
margin: auto;
position: relative;
height: auto;
z-index: 40;
}
.div1:hover .div3 img{
transform: scale(1.25);
}
.div1:hover .div2 img{
opacity: 0.5;
}
.div3 img {
transition: transform 0.3s ease-in;
}
.div2 img {
transition: opacity 0.3s ease-in;
}
<div class="div1">
<div class="div2">
<img src="https://wallpaperscraft.com/image/absolute_vodka_collection_alcohol_drinks_20440_1920x1080.jpg" />
</div>
<div class="div3">
<div class="image-container">
<img src="https://ez.no/var/ezflow_site/storage/images/media/images/symfony-2.3-lts-in-ez-publish-platform-5.2/390464-1-eng-GB/Symfony-2.3-LTS-in-eZ-Publish-Platform-5.2_fancybox.png" />
</div>
</div>
</div>
Related
I was wondering if anyone knew how to make an object in this case my ball div appears like it is coming at the screen. Something that is sort of a 3D effect if that makes sense. My code is attached to the bottom.
var ballMotion = gsap.timeline();
ballMotion
.to(".circle", {duration: 3, transform: 'scale(14)'})
body {
width: 300px;
margin: 20px auto;
}
.circle {
display: block;
background: black;
border-radius: 100%;
height: 300px;
width: 300px;
margin: 0;
background: radial-gradient(circle at 100px 100px, #FE0, #FAFAD2);
}
<figure class="circle"></figure>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/gsap.min.js"></script>
I see you are using gsap.js, I am unsure exactly how this is working but in pure css you can use transform-style: preserve-3d; and the use perspective() and translateZ() and the #keyframes. I am sure with knowledge of Green Sock you can getting this working. see code below:
CSS
.wrapper--outer {
display: flex;
justify-content: center;
position: relative;
margin: 0;
width: 100%;
height: 100%;
padding: 1px;
}
.snowman {
display: flex;
justify-content: center;
position: absolute;
top: 18vh;
height: 200px;
width: 200px;
}
.snowball {
width: 20px;
height: 20px;
border-radius: 10px;
background-color: blue;
position: absolute;
top: 10%;
left: 50%;
perspective: 550px;
transform-style: preserve-3d;
animation-name: snowball;
animation-duration: 2s;
animation-timing-function: ease-out;
animation-delay: 2s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
}
#keyframes snowball {
0% {
transform: perspective(550px) translateZ(200px);
}
100% {
transform: perspective(1000px) translateZ(999px);
}
}
<body>
<div class="wrapper--outer">
<div class="snowman">
<div class="snowball"></div>
</div>
</div>
</body>
JSBin
https://jsbin.com/ropomoquxu/edit?html,css,output
I have a layout with sidebar and main content inside a parent element called wrapper and a button to toggle sidebar which is absolute positioned, relative to sidebar. But the main-content is not staying in full width when the sidebar closed. I was able to find out that giving the sidebar as fixed would solve the problem, But I don't want it to be fixed, Is there a way to achieve this without giving position fixed for sidebar. I have used translate for toggling the sidebar.
Jsfiddle - https://jsfiddle.net/wu1zfg35/
Here is the css. working code can be found in js fiddle link
body {
margin: 0;
}
.wrapper{
display: flex;
height: 100vh;
}
.sidebar {
position: relative;
/* position: fixed; */
width: 350px;
height: 100%;
background-color: red;
transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
-webkit-transform: translate3d(-100%, 0px, 0px);
transform: translate3d(-100%, 0px, 0px);
}
.main-content {
width: 100%;
background-color: yellow;
transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
}
.hide-customize-tab {
position: absolute;
display: flex;
top: 50%;
right: -25px;
align-items: center;
justify-content: center;
height: 25px;
width: 25px;
background-color: black;
transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
cursor: pointer;
}
.hide-customize-tab .close-button {
display: none;
height: 10px;
width: 7px;
}
.hide-customize-tab .open-button {
height: 10px;
width: 7px;
}
.wrapper.sidebar-opened .sidebar {
-webkit-transform: translate3d(0px, 0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
.wrapper.sidebar-opened .sidebar .hide-customize-tab {
right: -15px;
}
.wrapper.sidebar-opened .sidebar .hide-customize-tab .open-button {
display: none;
}
.wrapper.sidebar-opened .sidebar .hide-customize-tab .close-button {
display: block;
}
.wrapper.sidebar-opened .main-content {
/* margin-left: 350px; */
width: calc(100% - 350px);
}
Remove the width: 350px; from .sidebar and add it to .wrapper.sidebar-opened .sidebar
So the code wil be
.sidebar {
width: 0;
}
.wrapper.sidebar-opened .sidebar {
width: 350px;
}
I have a div that transitions on the Y-axis by 100px. I am wanting my blue div #home-section3 to not have any top margin from .home-section2 after the transition, but ideally I do not want to have to set the margin-top to -100px for every div below the transition div. Is there a different way in which I can get the white-space gap to not appear after the transition finishes?
Here is a fiddle.
function section2Delays() {
$('.home-section2').addClass('fadeDisplay');
};
setTimeout(section2Delays, 300);
.home-section2 {
display: inline-block;
width: 50%;
height: 300px;
vertical-align: top;
margin-top: 100px;
opacity: 0;
transition: 1s;
-webkit-transition: 1s;
background: green;
}
.home-section2.fadeDisplay {
transform: translateY(-100px);
-webkit-transform: translateY(-100px);
transition: 1s;
-webkit-transition: 1s;
opacity: 1;
}
#home-section3 {
width: 100%;
max-width: 100%;
height: auto;
background: #094765;
padding: 50px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="home-section2"></div>
<section id="home-section3"></section>
add margin-bottom:-100px in class .fadeDisplay
function section2Delays() {
$('.home-section2').addClass('fadeDisplay');
};
setTimeout(section2Delays, 300);
.home-section2 {
display: inline-block;
width: 50%;
height: 300px;
vertical-align: top;
margin-top: 100px;
opacity: 0;
transition: 1s;
-webkit-transition: 1s;
background: green;
}
.home-section2.fadeDisplay {
transform: translateY(-100px);
-webkit-transform: translateY(-100px);
transition: 1s;
-webkit-transition: 1s;
opacity: 1;
margin:0 0 -100px 0 ;
}
#home-section3 {
width: 100%;
max-width: 100%;
height: auto;
background: #094765;
padding: 50px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="home-section2"></div>
<section id="home-section3"></section>
You can probably use margin-top instead of transform.
.fadeDisplay {
margin-top: 0;
}
jsFiddle
In fact, the whole animation can be done with CSS only.
.home-section2 {
margin-top: 100px;
opacity: 0;
animation: ani 2s forwards;
}
#keyframes ani {
to {
margin-top: 0;
opacity: 1;
}
}
jsFiddle
when i scrolling down my menubar go behind the cycle slider i tried z-index 1 but its not working please give any soloution i dont know what going wrong
</div>
<img src="http://malsup.github.io/images/p1.jpg">
<img src="http://malsup.github.io/images/p2.jpg">
<img src="http://malsup.github.io/images/p3.jpg">
<img src="http://malsup.github.io/images/p4.jpg">
</div>
</div>
<div class="section_about">
</div>
*{
margin: 0;
padding: 0;
}
/* Top Menu Start Here */
.top_nav{
height: 90px;
width: 100%;
background: rgba(0,0,0,.5);
position: fixed;
z-index: 1;
transition:all 0.7s ease;
-webkit-transition:all 0.7s ease;
-moz-transition:all 0.7s ease;
-o-transition:all 0.7s ease;
-ms-transition:all 0.7s ease;
}
.container{
height: 100vh;
width: 100%;
max-width: 100%;
background-image: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ24kd_2tEzjbb_GdPnMQKog7lMCxtYmmy7dxjjpDr6d2ZseK-Dig");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
top: 0;
}
.site-dt{
background-color: #fff;
height: 573px;
width: 100%;
}
#slider-main{
height: 578px;
width: 100%;
overflow: hidden;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#slider-main #slider img{
height: 100%;
width: 100%;
}
.section_about{
height: 573px;
width: 100%;
background-color: #de5670;
overflow: hidden;
position: absolute;
}
Try doing a
display: block;
or
display: table;
on both of them. Set the index 2 for the menu, and 0 for the slide container. I hope this helps.
Try this :
#slider-main #slider img{
height: 100%;
width: 100%;
position:absolute !important;
z-index:2!important;
}
Was goofing around with css3 animation
check it up http://codepen.io/rokki_balboa/pen/eNVEyq
<section>
<div></div>
<div></div>
</section>
Change
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
* {
margin: 0;
padding: 0;
}
html {
overflow: hidden;
}
body {
height: 100vh;
width: 100vw;
background-color: #000;
position: relative;
}
section {
width: 100%;
height: 100%;
position: relative;
perspective: 500px;
}
section:hover {
transform-style: preserve-3d;
animation: cool 5s ease-in-out forwards;
}
#keyframes cool {
0% {
transform: perspective(1000px) translateZ(0px);
}
45% {
transform: perspective(1000px) translateZ(-400px);
}
55% {
transform: perspective(1000px) translateZ(-400px) rotateY(.5turn);
}
100% {
transform: perspective(1000px) translateZ(-400px) rotateY(.5turn) translateZ(-400px);
}
}
div {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
div:nth-child(1) {
background: url(http://i.imgur.com/dLBSLQu.jpg) top center no-repeat;
background-size: cover;
}
div:nth-child(2) {
background: url(http://i.imgur.com/uL0mXb6.jpg) top center no-repeat;
background-size: cover;
transform: rotateY(.5turn);
backface-visibility: hidden;
}
#trigger {
position: absolute;
bottom: 10px;
left: 10px;
color: #fff;
font-size: 14px;
}
.ghoster {
display: none;
}
As you can see it works when hovering section. But my goal is to trigger hovering on section when you click an anchor.
1. you click on change anchor
2. animation comes on section element
3. click again
4. animations comes again
I have no idea how to achieve such a result. Can you please help me.
p.s. It would be better if you do it on pure javascript.
CSS
<style>
section.activateHover
{
transform-style: preserve-3d;
animation: cool 5s ease-in-out forwards;
}
</style>
HTML
<section id="sectionToChange">
<div></div>
<div></div>
</section>
Change
Javascript
<script type="text/javascript">
var trigger = document.getElementById('trigger');
var sectionToChange = document.getElementById('sectionToChange');
trigger.onclick = function(e)
{
//toggle hover
sectionToChange.className = (sectionToChange.className == 'activateHover') ? '' : 'activateHover';
//restart animation
if(sectionToChange.className != 'activateHover')
{
sectionToChange.className = 'activateHover';
}
}
</script>