I am trying to make a background slide show effect. What i have managed to do is to make this slideshow but without any beautifully effect like sliding or other image appearing effect. Can someone help with some advice in creating the effect of sliding or any other more beautiful effects.
Here what I managed to do:
HTML CODE
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script type="text/javascript" src="function.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body >
<div class='bannerbg'>
<div class='slider'></div>
</div>
</body>
</html>
CSS CODE
body{
margin: 0px;
margin-left: 0px;
}
.bannerbg{
background-size: cover;
position: relative;
height: 500px;
}
.bannerbg img{
width: 100%;
}
.slider{
width: 940px;
height: 360px;
background-color: #FFDF00;
position: relative;
margin: 0 auto;
top: -370px;
}
JavaScript CODE
$(document).ready(init)
images=new Array
(
"img/1.jpg",
"img/2.jpg",
"img/3.jpg",
"img/4.jpg"
);
function init(){
$('.bannerbg').prepend("<img id='principala' src='"+images[1]+"' />")
}
function left() // functia data schimba cu locul indexul din array la stinga cu 1 unitate
{
images.push(images.shift());
}
function change(){
p=document.querySelector("#principala");
p.src=images[1];
}
setInterval("left(); change()",1000);
I slide the elements by using the animate function and by setting the css property and animation time in miliseconds for that element, like that:
jQuery( "#slid_img1" ).animate({marginLeft: 0}, 250);
It slides very nicely then.
So, you could adapt your code to use the animate function to make the slide animate.
Related
I am using the divi theme for wordpress, I have selected the code module and I am trying to get a picture of a website to scroll when hovered over and to reverse scroll when the hover ends...therefore returning the image back to its original location. There is an image in front of the website. Basically this gives the appearance that the user is scrolling down the webpage from a computer. The idea was originally discovered at dividojo.com (Good idea dividojo!) https://www.dividojo.com/website-design/ it is located towards the bottom of the page.
I have the complete code fully functional outside of wordpress with the following code.
<!DOCTYPE html>
<html>
<head>
<title>animatingimage</title>
<link href="css/style.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#insideComputer").hover(function() {
$("#insideComputer").stop(true).animate({
marginTop:"-1210px"
}, 5000);
},
function(){
$("#insideComputer").stop(true).animate({
marginTop:"0px"
}, 5000);
});
});
</script>
</head>
<body>
<div id="bigDiv">
<img id="computer" src="img/computer3.png">
<div id="imgDiv">
<img id="insideComputer" src="img/website1.png">
</div>
</div>
</body>
</html>
and here is the attached external CSS.
#bigDiv {
background-color: #F5F5F5;
width: 500px;
height: 500px;
margin: 200px;
}
#imgDiv{
width: 463px;
height: 269px;
position: relative;
top: -430px;
left: 19px;
overflow: hidden;
}
#insideComputer {
width: 100%;
}
Like I said, the above functions appropriately. I am trying to input this into the divi theme. I have modified the above code to this:
<style>
#bigDiv {
background-color: #F5F5F5;
width: 500px;
height: 500px;
margin: 200px;
}
#imgDiv{
width: 463px;
height: 269px;
position: relative;
top: -430px;
left: 19px;
overflow: hidden;
}
#insideComputer {
width: 100%;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#insideComputer").hover(function() {
$("#insideComputer").stop(true).animate({
marginTop:"-1210px"
}, 5000);
},
function(){
$("#insideComputer").stop(true).animate({
marginTop:"0px"
}, 5000);
});
});
</script>
<div id="bigDiv">
<img id="computer" src="http://localhost/kaiserkreations/wp-
content/uploads/2017/08/computer3.png">
<div id="imgDiv">
<img id="insideComputer" src="http://localhost/kaiserkreations/wp-
content/uploads/2017/08/website1.png">
</div>
</div>
With all of the documentation I have read, I should be able to place this inside of the content section of the divi code module and have it work appropriately. When I place this chunk into the module, I see the image, and the formatting is appropriate, but the animation is dead. I do know that Jquery is working correctly, because when i test with an alert function it works fine.
Any ideas where I've gone wrong. I looked but was unable to find anything on stack overflow similar.
Thanks guys!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
I have discovered that the code above does in fact work as posted. However, it appears that the current version of Jquery is not inherently included in the newest divi theme. so i simply placed it above the script posted above and it started to function. I am noticing some errors thrown in the console, however everything is functioning.
It is also working with placing the jquery embed in the head directly. I prefer this method more.
So HERE is the code. I simple want to change the color of the h1 heading when the scroll is 1000px from top. I would like to use purely javascript for this purpose.Please try and ignore how poorly the code has been written. Any suggestion would be more than welcome. Thank you for you time.
<html> <head> <title> scroll </title>
<!-- CSS !-->
<style> .redbox {
background-color: red;
position: absolute;
top: 10px;
height: 90px;
width: 100px;
} .reveal {
position: fixed;
top:450px;
transition: width 2s;
display: block;
} </style>
</head>
<!-- HTML !-->
<body>
<div class='redbox' id='red'> , </div>
<h1 class='reveal' id='demo'> The comes up on 1000 scroll! </h1>
<h1 style='position: absolute;top: 1900px;'> END </h1>
<!-- JS !-->
<script>
var top = window.pageYOffset || document.documentElement.scrollTop
if (top == 1000) {
document.getElementById('demo').style.color = 'red'}
</script> </body> </html>
You could check the current scroll offset using an event handler:
document.body.addEventListener('scroll', function() {
if(window.scrollY > 499) {
document.getElementById('myDiv').classList.add('appear'); // or whatever...
}
});
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
});
I have a webpage that uses tubular.js script to show youtube video as a site background. There's a sentence on tubular page:
First, it assumes you have a single wrapper element under the body tag
that envelops all of your website content. It promotes that wrapper to
z-index: 99 and position: relative.
So following that, I wrote a simple html/css code:
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
#logocontainer{
position: absolute;
top: 20%;
margin-top: -35px;/* half of #content height*/
left: 0;
width: 100%;
text-align:center;
}
#logo {
margin-left: auto;
margin-right: auto;
height: 75px;
}
</style>
<body>
<div id="wrapper" class="clearfix">
<div id="logocontainer">
<div id="logo">
<img src="img/logo.png"/>
</div>
</div>
</div> <!--wrapper-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.tubular.1.0.js"></script>
<script type="text/javascript">
$(function() {
var options = {
videoId : '9JXVUP1hyxA',
start : 1
};
$('body').tubular(options);
});
</script>
</body>
</html>
but now, when I run it - I see only youtube video without my logo on top... I know the logo is there, because when I comment out the youtube script I can see it, however I don't see it when the video is present. I tried to add z-index:99 to #logo but that didn't do any magic... Can you help me with that?
EDIT:
As A. Wolff suggested below, I added to my css:
#wrapper{
z-index:99;
position: relative;
}
still though - no good results, video is still on top..
I see in their own Tubular they use this little script...
$('document').ready(function() {
var options = { videoId: 'ab0TSkLe-E0', start: 3 };
$('#wrapper').tubular(options);
// f-UGhWj1xww cool sepia hd
// 49SKbS7Xwf4 beautiful barn sepia
});
Just adding this keeps everything on top.
Use the code in this Fiddle as a sample.
Your must use z-index with position: relative/absolute.
Also your z-index in video must be less than in your blocks.
video {
position: absolute;
z-index: 1;
}
div {
position: relative;
z-index: 2;
}
I have managed to accomplish a delay and then translate on my image - then I wanted to rotate it a little as it moved, so I found a way to rotate it from here https://code.google.com/p/jqueryrotate/
So I managed to apply it but the outcome is that the rotation ignores the delay and the translate I've tried a few ways to combine the functions together but not sure how the best way to do it is.
I would just use css transforms but ideally I need it to work in IE7.
Is there a more simple way I can try?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.hold{
width:250px;
height: 400px;
margin: 0 auto;
background: #eee;
position: relative;
}
.pos{
position: absolute;
}
.ccard{
width:250px;
height: 400px;
background: red;
}
.rcard{
width:250px;
height: 400px;
background: blue;
left:0px;
}
.lcard{
width:250px;
height: 400px;
background: green;
left:0px;
}
</style>
<body>
<div class="hold">
<div class="lcard pos" style="left:0px;">
</div>
<div class="rcard pos">
</div>
<div class="ccard pos">
</div>
</div>
</body>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.transform-0.9.3.min_.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jQueryRotate.js"></script>
<!-- Jumping Animation -->
<script type="text/javascript">
$(function(){
$('.lcard').delay(2600).animate({'top': '-12px', 'left': '100px'}, 800,'easeOutQuart');
$('.rcard').delay(2600).animate({'top': '-12px', 'left': '-100px'}, 800,'easeOutQuart');
});
var rotation = function (){
$(".lcard").rotate({
angle:0,
animateTo:20,
});
}
rotation();
</script>
</html>
Try using setTimeout(). It's used to call a method after a specified time. Example suitable for this case.
setTimeout(function() {
$(".lcard").rotate({
angle:0,
animateTo:20,
});
}, 2600);
More information on setTimeout() here https://developer.mozilla.org/en/docs/Web/API/window.setTimeout