I want to apply a smooth transition effect when I'm enlarging an image. Usually its pretty easy but since I'm trying to enlarge image from being constrained vertically to be contained horizontally it doesn't seem to work properly.
This code doesn't seem to work... probably because of the width auto... before moving into JS territory, forcing a px height/width, I'd love to see if it's possible to solve it with just CSS. Thanks.
$(".enlargeButton").click(function() {
$(".image").toggleClass('larger');
});
.image img {
height: 80vh;
width: auto;
transition: height 600ms, width 600ms;
}
.image.larger img {
width: 80vw;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<!-- your HTML here -->
The Problem you are facing is that you set the classes together in your css: image.larger img try to seperate those to only .larger.
Maybe this code helps you to understand your issue:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=q, initial-scale=1.0" />
<title>Document</title>
<style>
.image {
height: 80vh;
width: auto;
transition: 600ms ease-in-out;
}
.larger {
height: 80vw;
width: auto;
}
</style>
</head>
<body>
<img
class="image"
src="https://lelolobi.com/wp-content/uploads/2021/11/Test-Logo-Small-Black-transparent-1-1.png"
alt=""
/>
<button class="enlargeButton">Enlarge</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(".enlargeButton").click(function () {
$(".image").toggleClass("larger");
});
</script>
</body>
</html>
Related
This is my first time trying scroll trigger in gsap I am trying to understand how locomotive scroll and scroll trigger work together but when the animation is going on I am facing some kind of sticky-ness in the animation I mean the animation is not smooth there is some kind of delay in between but I don't know what is the reason for this. I tried to recreate this situation in my code pen which I have linked below. It will be helpful if someone can help me to solve this Here is my code-pen code where I recreated the error. code-pen
here is the code
gsap.registerPlugin(ScrollTrigger);
const pageContainer = document.querySelector(".scrollContainer");
const scroller = new LocomotiveScroll({
el: pageContainer,
smooth: true,
});
scroller.on("scroll", ScrollTrigger.update);
ScrollTrigger.scrollerProxy(pageContainer, {
scrollTop(value) {
return arguments.length
? scroller.scrollTo(value, 0, 0)
: scroller.scroll.instance.scroll.y;
},
getBoundingClientRect() {
return {
top: 0,
left: 0,
width: window.innerWidth,
height: window.innerHeight,
};
},
pinType: document.querySelector(".scrollContainer").style.transform
? "transform"
: "fixed",
});
// ! edit here
gsap.to(".left", {
scrollTrigger: {
trigger: ".left",
start: "center top",
scroller: pageContainer,
scrub: true,
},
duration: 1,
x:50
});
ScrollTrigger.addEventListener("refresh", () => scroller.update());
ScrollTrigger.refresh();
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root{
--white:#fff;
}
body{
font-family: 'neue-med';
background-color: #D4C9C9;
}
.container{
padding: 35px;
height: 200vh
}
h4{
letter-spacing: 1px;
display: inline-block;
font-size: 25px;
transition: .2s ease-in;
}
h4:hover{
color: whitesmoke;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/locomotive-scroll#3.5.4/dist/locomotive-scroll.css"
/>
<!-- <link rel="stylesheet" href="/base.css"> -->
<link rel="stylesheet" href="/style.css" />
<title>Document</title>
</head>
<body>
<div class="container scrollContainer">
<div class="sec" data-scroll-section>
<div class="nav">
<div class="nav-text">
<h4 class="left">LOCOMOTIVE.CA</h4>
<h4 class="right" style="float: right">V4.X-EDITION</h4>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.3/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.3/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll#3.5.4/dist/locomotive-scroll.min.js"></script>
</body>
</html>
So basically I have got an unspecified transition set on my h4 - so basically a transition all - in CSS, which is interfering with GSAP's tween.
so I need to either get rid off it or specify what is supposed to be transitioned, so it does not add CSS transitions to properties you are going to tween on with GSAP on those elements.
Any idea how to make it slide down ? i tried to pass second argument with a time but it swings it left.
Should i use another method ?
$(document).on('click', '#bar', function () {
$("#baz").addClass("foo");
});
body{
height:200px;
position:relative;
}
.foo{
position:absolute;
bottom:0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>
<body>
<button id="bar">PUSH IT DOWN</button>
<div id="baz">TEST</div>
</body>
</html>
You can do this with CSS. Add an animation to your foo class and add an #keyframes rule for animating the tween of the position of the absolute positioned element. Just make sure the class you're adding foo, in your case, has a position set to the position you wish it to be when the animation is finished.
$(document).on('click', '#bar', function() {
$("#baz").addClass("foo");
});
body {
height: 200px;
position: relative;
}
.foo {
position: absolute;
animation: slidedown .5s ease-in-out;
bottom: 0;
}
#keyframes slidedown {
0% {
/* since the .foo class is set to bottom: 0, we will start at 0% to 160px*/
bottom: 160px;
}
100% {
/* we end at 0, which will be the bottom of the parent divs height */
bottom: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>
<body>
<button id="bar">PUSH IT DOWN</button>
<div id="baz">TEST</div>
</body>
</html>
jQuery has built in functionality for that. See https://api.jquery.com/slideDown/ for details and example
I am trying to make a fade in- fade out transition between two pages with full screen images. Currently I'm trying to achieve this with the swup plugin.
I can achieve a new full screen image on each page by setting a class on every html, like:
<!DOCTYPE html>
<html lang="en" class="home_bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Home</title>
</head>
<body>
<nav>
Home
About
</nav>
</body>
</html>
And css:
*{
margin: 0;
padding: 0;
}
.home_bg {
background: url(img/landscape.jpg) no-repeat center center fixed;
background-size: cover;
}
.about_bg {
background: url(img/ocean.jpg) no-repeat center center fixed;
background-size: cover;
}
nav{
font-size: 24px;
}
Html for the transition:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script defer src="node_modules/swup/dist/swup.min.js"></script>
<script defer src="script.js"></script>
<link rel="stylesheet" href="style.css">
<title>Home</title>
</head>
<body>
<nav>
Home
About
</nav>
<main id="swup" class="transition-fade">
<h1>This is home</h1>
</main>
</body>
</html>
And the css:
*{
margin: 0;
padding: 0;
}
nav{
font-size: 24px;
}
.transition-fade{
opacity: 1;
transition: 500ms;
}
html.is-animating .transition-fade {
opacity: 0;
}
There is also one line js for the transition:
const swup = new Swup();
My problem is I can't seem to get these two to work together. I either get the full image pages OR the transition, not the full image pages WITH transition. The problem seems to lie in the fact that the image has to be within the "swup". But every time I try to put my image there, I lose control over its size and proportions, even if I give it a class of its own.
Now I have tried about a zillion things and I have tried to google this for a few days but no luck. I have only been working with html, css and js with this. Should I be looking elsewhere?
Any help here is highly appreciated.
Thanks
I finally managed to solve this. It may not be the best solution, so if you have a better one, please let us know.
I added this html-part below the navigationbar:
<main id="swup" class="transition-fade">
<div class="background-parent">
<div class="background-home"></div>
</div>
</main>
And in the css:
.background-home {
width: 100%;
height: 100%;
background: url(img/landscape.jpg) no-repeat center center fixed;
background-size: cover;
}
I have an issue with CSS property cursor on Windows operation system.
It seems that "col-resize" tries to invert the color of cursor depending on background.
The problem appears with gray color because one makes the cursor invisible.
.test {
cursor: col-resize;
background: gray;
width: 100px;
height: 100px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class='test'>
</div>
</body>
</html>
I am facing issue while developing one of My jQuery task. As....
I have a responsive Image(Working on all mobile device resolution), My Task is when I click on that image, I want to get a image position on which the image clicked.. I tried to complete this task using Page X and page Y behaviour of jQuery.but it gives the different value when I changed the resolution of screen.
Please help me and give me suggestion or provide a sample how can I do this. I guess position should be same even if the resolution would be different.
I'm not sure understand your issue but i think you want to do this
If i wrong please share your codes and more describe your isssue
$(function (){
'use strict';
$('.img1').click(function (){
$('.img2').css({
'z-index': 3
});
});
$('.img2').click(function (){
$(this).css({
'z-index': 1
});
});
});
.box {
position: relative;
width: 10em;
height: 10em;
}
.box .img1,
.box .img2 {
position: absolute;
width: 10em;
height: 10em;
-webkit-background-size: cover;
background-size: cover;
}
.img1 {
background-image: url(https://lh3.googleusercontent.com/-e8VRnumXmR0/AAAAAAAAAAI/AAAAAAAAAUQ/uk_p3w15PNs/photo.jpg?sz=128);
z-index: 2;
}
.img2 {
background-image: url(https://www.gravatar.com/avatar/5768f7edd993f3f1a5363f6d786d5ace?s=128);
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="box">
<div class="img1"></div>
<div class="img2"></div>
</div>
</body>
</html>
You can simply change the CSS z-index by jquery:
$(target).css({
'z-index': 2
});