here is my code in which i only know the mouse over and is working completely fine, but it mouse over the whole picture and i want the mouse over from the inside as well as the a slight zoom-in, here is the site from which you can see what am i asking for? (https://woodmart.xtemos.com/demo-grocery/demo/grocery/#) when you scroll down to the ads and then you hover on ads you can experience mouseover from the inside as well as a slight zoom-in. Thanks in advance.
<body>
<div class="page-container">
<div class="page-back">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript">
var windowWidth = $(window).width();
$('.page-back').mouseover(function(event){
var moveX = (($(window).width() / 2) -event.pageX)*0.1;
var moveY = (($(window).height() / 2) -event.pageY)*0.1;
$('.page-back').css('margin-left', moveX +'px');
$('.page-back').css('margin-top', moveY +'px');
});
</script>
</body>
here is its css
.page-container{
width: 50%;
height: 50%;
position: fixed;
background-color: #fff;
}
.page-back{
width: 100%;
height: 100%;
left: -20%;
top: -10%;
position: absolute;
background-image: url('https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2020/06/wood-food-market-ban-1-opt.jpg');
background-size: 500px;
background-position: center;
}
You don't actually need Js for this. You can do this using CSS.
HTML :
<div class="page-container">
<div class="page-back">
</div>
</div>
CSS :
.page-container{
width: 300px;
height: 200px;
border: 1px solid #000000;
overflow: hidden;
position: relative;
}
.page-back{
width: 100%;
height: 100%;
background: url('https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2020/06/wood-food-market-ban-1-opt.jpg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
transition: all 1s;
}
.page-back:hover{
transform: scale(1.2);
}
The main thing here is setting overflow : hidden on page-container.
This will do the job. But the background image scales only when hovered on the image and not on any elements inside. For that you need Js.
Js :
$(document).ready(function() {
$('.page-container').mouseover(function() {
$(this).find('.page-back').css('transform', 'scale(1.2)');
});
$('.page-container').mouseout(function() {
$(this).find('.page-back').css('transform', 'scale(1)');
});
});
Related
I am a little new to using TweenLite. As you will see in the example, I have a div that I slide up which is all good, and I want to rotate the div itself so am using rotation 18deg however, can rotate this before the animation as appears it animated the rotation as it slides up. So I need to rotate out of view.
$(document).ready(function(){
TweenLite.to("#slide_one .background",
0.4, // set the speed
{rotation:"18deg", top:"0" // set the angel and end position
});
});
.container {
display: block;
width: 300px;
height: 250px;
border: 1px solid #000000;
overflow: hidden;
position: relative;
}
.background {
position: relative;
display: block;
width: 200%;
height: 200%;
left: -100%;
bottom: -300px;
}
.background.dark-blue {
background: #071D49;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenMax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="slide_one">
<div class="background dark-blue"></div>
</div>
</div>
For anyone wanting to know the solution you have to use set so does not animate
TweenLite.set(slide_one, { rotation: "18deg" });
Trying to emulate position fixed (because I need the effect of background-attachment: fixed, on a div) and I can't seem to get it to perform well enough to use.
I've tried numerous variations, with transforms instead of top, with easings to ease the judder, and using requestAnimationFrame instead of scroll but they all suffer the same problem.
If you checkout the below fiddle you'll see how it works but it's very jumpy/laggy. Is it possible to fix this somehow?
var el = document.getElementsByClassName('shape')[0];
var poffset = el.parentNode.offsetTop;
var scroll;
window.addEventListener('scroll', function(){
scroll = window.pageYOffset;
poffset = el.parentNode.offsetTop;
raf();
});
function raf(){
el.style.transform = 'translateY('+parseInt(scroll-poffset)+'px)';
// requestAnimationFrame(raf);
}
raf();
.content {
height: 100vh;
background-color: #ace;
}
.fixed {
height: 100vh;
overflow: hidden;
position: relative;
}
.shape {
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 300px;
margin-top: -150px;
margin-left: -150px;
background-color: #bada55;
border-radius: 20%;
}
<div class='content'>
</div>
<div class="fixed">
<i class="shape"></i>
</div>
<div class="content">
</div>
I am a bit new to coding. I have a div with a background image. I want to be able to change the image from its blurred version to a clearer version as I scroll down. My HTML code is like this:
<div class="intro">
<div class="blur" style="background-image: url("blurimage.png");"></div>
<div class="clear" style="opacity: 0.00666667; background-image: url("image.png");"></div>
</div>
My CSS code is like this:
.intro{
display: table;
width: 100%;
height: 700px;
position: relative;
}
.blur{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
z-index: -10;
background-color: #222;
}
.clear{
background-size: cover;}
I have tried using many javascript functions but no avail. Please guide me as to how can I do this by using a Javascript function.
Thanks!
Using JavaScript you could try
document.addEventListener("scroll", function(event) {
// this code is executed each time the user scrolls
var scrollPosition = window.pageYOffset;
// scrollPosition is 0 at the top of the page
// it contains how many pixels have been scrolled down
});
Hope that helps.
Add this to your JS file (I assume you have jQuery included as well):
jQuery(document).ready(function($) {
scrollPosition = $(document).scrollTop();
$('body').scroll(function() {
$('.intro .clear').animate({
height: scrollPosition,
}, 300);
});
});
Also add this to .clear:
.clear {
position: absolute;
top: 0;
left: 0;
height: 0;
background-size: cover;
}
Also keep in mind that this code will work if you have your image on top of the page. Otherwise feel free to change $(document).scrollTop() with the actual selector of the parent element.
I would also recommend renaming the clear class with some other name, since if you decide to use CSS framework or plugin at later point, that class name might be reserved for clearfix styles.
see here jsfiddle
made a simple example with changing the background-color . this is for example purposes only because i can't use your images
also...you need only 1 div inside the intro and toggle classes on that div from .blur to .clear and vice-versa and use CSS to style those classes.
the idea is that you have only one div w to which you change the background depending on the scroll
HTML :
<div class="intro">
<div class="blur"></div>
</div>
CSS :
.intro{
display: table;
width: 100%;
height: 700px;
position: relative;
}
.intro div {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
z-index: -10;
}
.blur{
background-image: url("blurimage.png");
background-color: red;
}
.clearimg {
background-size: cover;
background-color:blue
background-image: url("image.png");
}
JQ :
$(window).scroll(function() {
if ($(window).scrollTop() > 0) {
$(".intro div").addClass("clearimg")
$(".intro div").removeClass("blur")
}else{
$(".intro div").addClass("blur")
$(".intro div").removeClass("clearimg")
}
});
Im creating a page where my footer is growing on a certain event.
My problem is to make the footer grow according to how much space i got.
See my code or jsFiddle. I want the gray footer to grow all the way up to the colored elements with dynamic height (instead of like now, to 20%).
I guess i could count all the elements height above but that doesn't sound like a good solution.
jsFiddle here
<html>
<head>
<style type="text/css">
body #pagePlaceHolderOuter {
background: #FFFFFF;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
body #pagePlaceHolderOuter #pagePlaceHolderInner {
height: 100%;
margin: 0 auto;
max-width: 1000px;
min-width: 700px;
width: 70%;
position: relative;
}
body #pagePlaceHolderOuter #pagePlaceHolderInner .div1 {
width: 100%;
height: 100px;
background: blue;
}
body #pagePlaceHolderOuter #pagePlaceHolderInner .div2 {
width: 100%;
height: 120px;
background: green;
}
body #pagePlaceHolderOuter #pagePlaceHolderInner .div3 {
width: 100%;
height: 60px;
background: red;
}
body #pagePlaceHolderOuter #pagePlaceHolderInner .footer {
background: gray;
bottom: 0;
height: 10%;
position: absolute;
width: 100%;
}
</style>
</head>
<body>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$("#btn").click(function () {
$('body #pagePlaceHolderOuter #pagePlaceHolderInner .footer').css('height', '20%');
});
</script>
<div id="pagePlaceHolderOuter">
<div id="pagePlaceHolderInner">
<button type="button" id="btn">Click Me!</button>
<div class="div1">I have a dynamic height</div>
<div class="div2">I have a dynamic height</div>
<div class="div3">I have a dynamic height</div>
<div class="footer">Footer</div>
</div>
</div>
</body>
</html>
Instead of calculating the space of all the elements before, you can simply calculate the height of the most previous one and find the offset().top of that element. Using this approach I calculated the space (you have to make sure in your HTML the footer is directly after the previous element or slightly restructure my jQuery) and essentially you just toggle it between the default value and the default value + the space. Updated jsFiddle
$("#btn").click(function (e) {
var prev = $('.footer').prev(),
winHeight = $(window).height(),
calcTop = $('.footer').height() == Math.round(winHeight / 10) ?
(winHeight - prev.offset().top - prev.height()) : "10%";
$('body #pagePlaceHolderOuter #pagePlaceHolderInner .footer').css({
'height': calcTop
});
});
On a side note I used CSS transitions to "animate" the change, not jQuery for performance issues and for ease of editablity
If you just want the position to change, not the height, you can do it by toggling the bottom value instead. Demo of that here
What I am doing wrong?
When you click on class divtop, it should show a div popup in the middle of the page. At that time back page should become not clickable. escape or a button in popup will close it.
<html lang="en" class=" en">
<head>
<title>My Test Popup</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
.divtop
{
width: 800px;
height: 300px;
border:solid;
}
.divbottom
{
top: 400px;
}
.localmenu {
border: 1px solid black;
background: #fff;
margin-left : auto;
top: 50px; width: 300px;
padding-top: 25px;
margin-top: 100px;
height: 150px;
}
.appContent{
width: 800px;
border:solid;
height: 600px;
display: block;
margin-left: auto;
margin-right: auto;
}
.maincontent{
width: 100%;
}
</style>
</head>
<body>
<div class="appContent" >
<div class="maincontent" >
<div class="divtop" >Top</div>
<div class="divtop divbottom" >Bottom</div>
</div>
<div id="popup" style="width : 100%; height: 600px;display: none;">
<div class='localmenu'>
Text in Div Popup<br/>
<button id="btnHide">Close</button><br/>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('.divtop').click(function() {
$('#popup').show().css("top", "500px").animate({top: 50}, 200);
$('.mainContent').css("background-color", "grey");
});
$('#btnHide').click(function() {
$('#popup').hide();
});
});
</script>
</body>
</html>
Fiddle
I added some CSS to your #popup and it's now all in the CSS (not inline in the html). Changed also your jQuery animate to 50px, instead of just 50.
I think you have small adjustments to do to the CSS, like in .localmenu I'm not sure why you have both padding-top: 25px; margin-top: 100px;.
CSS
#popup {
position:absolute;
display: none;
float: left;
left:30%;
z-index:1;
}
#popoverlay {
position: fixed;
display:none;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.5;
}
jQuery
$(document).ready(function () {
$('.divtop').click(function () {
$('#popoverlay').show();
$('#popup').show().css("top", "500px").animate({
top: "50px"
}, 200);
$('.mainContent').css("background-color", "grey");
});
$('#btnHide').click(function () {
$('#popup').hide();
$('#popoverlay').hide();
});
});
HTML
<div class="appContent">
<div class="maincontent">
<div class="divtop">Top</div>
<div class="divtop divbottom">Bottom</div>
</div>
<div id="popup">
<div class='localmenu'>Text in Div Popup
<br/>
<button id="btnHide">Close</button>
<br/>
</div>
</div>
</div>
To get it to work properly, even if there is a vertical scroll bar, you have to use position "fixed". Place popup as a direct child of body and make it's position: fixed, and width and height 100%. Place localmenu as a direct child of body as well. Working example at jsbin.
Html:
<div id="popup">
<!--// This is to stop the user from interacting with the content in the back
// and to give a visual clue about that
-->
</div>
<div class='localmenu'>
<div>
Text in Div Popup<br/>
<button id="btnHide">Close</button><br/>
</div>
</div>
<div class="appContent" >
<div class="maincontent" >
<div class="divtop" >Top</div>
<div class="divtop divbottom" >Bottom</div>
</div>
</div>
CSS:
//Use opacity to give a visual clue. Please note that this doesn't work in -all- browsers
#popup {
position: fixed;
width: 100%;
height: 100%;
display: none;
background: black;
opacity: .5;
top: 0;
left: 0;
}
//This is just to be able to center the actual menu
.localmenu {
top: 20%;
left: 0;
width: 100%;
position: fixed;
height: 150px;
display: none;
}
.localmenu > div {
border: 1px solid blue;
background: #fff;
margin-left : auto;
margin-right: auto;
width: 300px;
height: 150px;
}
Javascript: (This is mostly the same, although I removed the animate, because I don't know exactly how it works and it needs to end at 'top: 0'. As localmenu and popup are seperate, we show them seperate as well.)
$(document).ready(function() {
$('.divtop').click(function() {
$('#popup').show().animate(200);
$('.localmenu').show();
//$('.mainContent').css("background-color", "grey");
});
$('#btnHide').click(function() {
$('#popup').hide();
$('.localmenu').hide();
});
});
To block the div tags at the back from being clickable:
Add a div with the following style in your HTML. Im gonna call it overlay.
.overlay {
width: 100%;
height: 100%;
background-color: #000;
left: 0;
opacity: .8;
position: absolute;
top: 0;
z-index: 10000;
display: none;
}
This will essentially cover up your page when shown up.
To center your popup:
I added some extra styles to #popup and removed some from .localmenu. You were missing position: absolute and z-index, added those in. (z-index of popup must be > z-index of overlay)
#popup {
background: #fff;
position :absolute;
left : 40%;
width : 300px;
height: 600px;
height: 150px;
display: none;
z-index: 10001;
}
.localmenu
{
border: 1px solid black;
}
Then, in your JS,
In your animate method, I changed 50px to 30% to center div#popup
Added code to hide and show .overlay along with #popup.
After the changes,
$(document).ready(function () {
$('.divtop').click(function () {
$('#popup').show().css("top", "500px").animate({
top: "30%"
}, 200);
$('.overlay').show();
});
$('#btnHide').click(function () {
$('#popup,.overlay').hide();
});
});
Demo
http://jsbin.com/olasog/1
Code
http://jsbin.com/olasog/1/edit
Try this:
$(document).ready(function() {
$('.divtop').click(function() {
var div = $('.appContent');
$('.localmenu').css({'margin': '200px auto'});
$('#popup').show().css({top: "500px", position: 'absolute', width: div.width(), height: div.height()}).animate({top: 0}, 200);
$('.mainContent').css("background-color", "grey");
});
$('#btnHide').click(function() {
$('.mainContent').css("background-color", "");
$('#popup').hide();
});
});