I have one problem that is was how to add rotateY(36deg) every 5 sec.
like:- 36deg after 5 sec it will become 72deg like so on
this is link:-
but there is no autoplay option.
http://www.jqueryscript.net/demo/Minimal-3D-Perspective-Carousel-with-jQuery-CSS3-3D-Carousel/
this is some css approach with jquery see on link FIDDLE
and this is code snippet
also u can add animation by searching little bit more
var a = 0;
$(document).ready(function(){
setInterval(function() {
a=a+36;
console.log(a);
$('.numcountbyinterval').text(a);
$('.rotate').css({ 'transform': 'rotateY(' + a + 'deg)'});
}, 500);
});
.rotate{
background-color:#ccc;
width:100px;
height:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="numcountbyinterval">0</span>
<div class="rotate">
Box inside wow
</div>
I set 500ms for the faster effect. Change 500 into 5000 to get 5sec and also remove perspective and perspective-origin css properties if you prefer 2d effect.
var box = document.getElementById('box');
var time = 5000;
var degPerTime = 36;
var framesPersecond = 32;
var intervalTime = 1000/degPerTime;
var degPerInterval = (degPerTime*intervalTime)/time
var rotate = 0;
setInterval(function(){
rotate -= degPerInterval;
box.style.transform = 'translateZ(-385px) rotateY('+rotate+'deg)';
},intervalTime);
body{
perspective: 500px;
perspective-origin: 10% 10%;
}
#box{
width:200px;
height:200px;
background-color:#33aaff;
position:relative;
top:100px;
left:100px;
}
<div id="box"></div>
Related
I'm completely stuck here. I'm trying to create a program where i have 5 different divs. They need to be placed at random position when running the program. And they need to switch position when i drag my mouse over them. So far i've done this. (which is completely wrong).
function Init()
{
div = document.getElementById("pixel");
div = document.getElementById("pixel1");
div = document.getElementById("pixel2");
div = document.getElementById("pixel3");
div = document.getElementById("pixel4");
spaceW = screen.height - div.height;
spaceH = screen.width - div.width;
setTimeout(moveIt, 0);
}
function moveIt()
{
div.style.top = (100*Math.random()) + "%";
div.style.left = (100*Math.random()) + "%";
}
<body onload="Init()">
<div id="pixel" style="background-color:blue; position:fixed; height:50px; width:50px; font-size:25px;"/>
<div id="pixel1" style="background-color:green; position:fixed; height:50px; width:50px; font-size:25px;"/>
<div id="pixel2" style="background-color:orange; position:fixed; height:50px; width:50px; font-size:25px;"/>
<div id="pixel3" style="background-color:yellow; position:fixed; height:50px; width:50px; font-size:25px;"/>
<div id="pixel4" style="background-color:red; position:fixed; height:50px; width:50px; font-size:25px;"/>
</body>
Can someone nudge me in the right direction because this clearly doesn't work.
check out after fix some syntax error like Pal Singh mention
AND
add all div(s) to one array so can be easy to control it
add [getRandomNum() , percentwidth() , percentHeight()] functions to keep div(s) in page
add moveIt() function to do some animation when move
function RandomIt()
{
var div_array = [];
div_array.push(document.getElementById("pixel"));
div_array.push(document.getElementById("pixel1"));
div_array.push(document.getElementById("pixel2"));
div_array.push(document.getElementById("pixel3"));
div_array.push(document.getElementById("pixel4"));
div_array.forEach(function(entry) {
moveIt(entry,getRandomNum(1,100 - percentwidth(entry)),getRandomNum(1,100 - percentwidth(entry)))
});
}
function getRandomNum(min, max) {
return Math.random() * (max - min) + min;
}
function percentwidth(elem){
return ((elem.offsetWidth/window.innerWidth)*100).toFixed(2);
}
function percentHeight(elem){
return ((elem.offsetHeight/window.innerHeight)*100).toFixed(2)+'%';
}
function moveIt(elem,target_x,target_y) {
var pos_x = 0;
var pos_y = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos_x == target_x && pos_y == target_y) {
clearInterval(id);
} else {
if(pos_x < target_x){
pos_x++;
elem.style.left = pos_x + '%';
}
if(pos_y < target_y){
pos_y ++;
elem.style.top = pos_y + '%';
}
}
}
}
<body onload="RandomIt()">
<button onclick="RandomIt()">RandomIt</button>
<div id="pixel" style="background-color:blue; position:fixed; height:50px; width:50px; font-size:25px;"></div>
<div id="pixel1" style="background-color:green; position:fixed; height:50px; width:50px; font-size:25px;"></div>
<div id="pixel2" style="background-color:orange; position:fixed; height:50px; width:50px; font-size:25px;"></div>
<div id="pixel3" style="background-color:yellow; position:fixed; height:50px; width:50px; font-size:25px;"></div>
<div id="pixel4" style="background-color:red; position:fixed; height:50px; width:50px; font-size:25px;"></div>
</body>
I've added your code to fiddle: https://jsfiddle.net/x05b5suz/2/
Few things I would like to tell you:
div = document.getElementById("pixel");
div = document.getElementById("pixel1"); // This is wrong
div = document.getElementById("pixel2");
You should declare your variable with var keyword and their name should be unique in a scope of a function otherwise you are just overwriting them. So you can name them var div1, var div2 so on.
In HTML, you need to close your <div>...</div> tags, div are not supposed to be quick closed.
I hope this helps
I'm trying to make image slider with my own without using plugins.
1st question : How to make the animation horizontally
2nd question : Whatever the size of the image, it must cover the height and width of its container, but keeping the proportionalities original image. The image can be rendered partially. How to make this?
3rd question : About the code of the slide, if anyone finds any improvement to make it lighter and more elegant, would be welcome.
$(function(){
setInterval(function(){
var displayed = $(".img-header.displayed");
displayed.animate({opacity : 0}, 500, function() {
displayed.css("display","none");
displayed.addClass("not-displayed").removeClass("displayed");
if(displayed.next(".img-header.not-displayed").length == 0){
$(".img-header:first").css("display","inline-block").css("opacity","1");
$(".img-header:first").addClass("displayed").removeClass("not-displayed");
$(".img-header:first").animate({opacity : 1}, 500);
}
else{
displayed.next(".img-header.not-displayed").css("display","inline-block").css("opacity","1");
displayed.next(".img-header.not-displayed").addClass("displayed").removeClass("not-displayed");
displayed.next(".img-header.not-displayed").animate({opacity : 1}, 500);
}
});
}, 4000);
});
#slider-container{height: 200px; width: 200px;}
#slider-container img.img-header{ width: 100%; height: auto;}
.displayed{display: inline-block;}
.not-displayed{display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider-container">
<img class="img-header displayed" src="http://i.stack.imgur.com/AIHnl.png" />
<img class="img-header not-displayed" src="http://i.stack.imgur.com/XQrms.png" />
</div>
I think you might be looking for something like this.
The slider here is position:relative; with top:100px; you can set as per your requirement. Still i suggest you to keep it positioned relative.
Slider has width:700px and height:500px;, you can change as per your requirement, it will be fine for whatever aspect ratio of image you have or all images with different aspect ratio.
There is an array for images to load which are serially numbered in one location, so you may give little more understanding into that. I have made a comment for that in JS file
Also you could change slider speed and delay as per your requirements.
When you hover over image it will pause the slider, which resumes after you leave image.
Snippet :
$(document).ready(function(){
var noPannel = document.getElementsByClassName("pannel").length;
var i;
var imgArr = [ ];
var pannelWidth = $(".slider_holder").width();
var totalWidth = noPannel*pannelWidth;
for (i=1;i<=noPannel;i++)
{
imgArr[i] = "http://www.picget.net/background/" + i + ".jpg"; //if you have somewhere on other path
//imgArr[i] = " " + i + ".jpg"; //use this if you have image in same folder/path.
}
for(i=1;i<=noPannel;i++)
{
$(".pannel:nth-child("+i+")").css("background","url("+imgArr[i]+")");
}
function jsslider()
{
var curScroll = $(".slider").scrollLeft();
var endScroll = totalWidth - (pannelWidth*2);
if(curScroll<=endScroll)
{
$(".slider").animate({scrollLeft: '+=' + pannelWidth +'px'},900,"swing");// Replace 900 for speed
}
else
{
$(".slider").animate({scrollLeft: '0px'},500,"swing"); // Replace 500 for speed to go bck to first
}
}
var interval = setInterval(jsslider, 3000); // Replace 3000 for delay between each slide.
$(".pannel").hover(function () {
clearInterval(interval);
}, function () {
interval = setInterval(jsslider, 3000); // Replace 3000 for delay between each slide.
});
}); // document.ready ENDS
html, body, *
{
margin:0px;
width:100%;
height:100%;
}
.slider_holder
{
margin-left:auto;
margin-right:auto;
display:block;
position:relative;
top:100px;
width:1024px;
height:768px;
background:#eee;
overflow:hidden;
}
.slider
{
width:auto;
height:100%;
width:100%;
white-space: nowrap;
overflow:hidden;
}
.pannel
{
margin:0px;
display:inline-block;
width:100%;
height:calc(100% - 1px);
/*border:1px solid red;*/
background-size:cover !important;
background-repeat:no-repeat;
background-position:50% 50% !important;
position:relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body onload="sliderFunc()">
<div class="slider_holder">
<div class="slider">
<span class="pannel"> </span>
<span class="pannel"> </span>
<span class="pannel"> </span>
<span class="pannel"> </span>
<span class="pannel"> </span>
</div>
</div>
</body>
I am new to javascript and I am trying to do a featured content slider something like the top banner in this website http://www.homeplus.co.kr
As you can see, the top big banner changes automatically & also will change when user hovers over one of the list at the right.
Right now I am able to do the hovering part, but I am still stuck at the automatic changing content part.
Here's a sample jsfiddle: http://jsfiddle.net/StormSdq/5tWPy/2/
<div class="pi">a</div>
<div class="pi">b</div>
<div class="pi">c</div>
<div class="pi">d</div>
<div class="c1">I DREAM</div>
<div class="c1">OF LLAMAS</div>
<div class="c1">JUMPING AROUND</div>
<div class="c1">EATING BUSHES</div>
css:
.pi {
font-size:12px;
color:#000;
font-weight:700;
width:30px;
height:25px;
margin-right:10px;
background:transparent;
border-bottom:solid 1px black;
}
.c1 {
border:1px solid blue;
background:lightskyblue;
width:200px;
height:200px;
float:right;
margin-right:430px;
margin-top:-100px;
color:red;
font-size:25px;
text-align:center;
display:none;
}
javascript:
div = document.getElementsByClassName('c1');
div[0].style.display = 'block'
B = document.getElementsByClassName('pi');
B[0].onmouseover = function () {
blip(0);
};
B[1].onmouseover = function () {
blip(1);
};
B[2].onmouseover = function () {
blip(2);
};
B[3].onmouseover = function () {
blip(3);
};
function blip(y) {
div = document.getElementsByClassName('c1');
for (x = 0; x < (div.length); x++) {
div[x].style.display = 'none';
}
div[y].style.display = 'block';
}
Any help will be greatly appreciated
Try this:
var cur = 0; // current index
setInterval(autoAnim, 2000); // auto change every 2s
function autoAnim(){
if(cur > 3) cur = 0;
blip(cur);
cur++;
}
Here is jsfiddle
You can use the function setTimeout to call something after XX miliseconds.
var number=0;
setTimeout(automatic,5000); // every 5 seconds
function automatic(){
blip(number);
number++;
if (number > 4)
number=0;
alert("Hello");
setTimeout(automatic,5000);
}
You will probably want to make the function sleep when mouse is hover and some others condtions
When I run the function spin() for the first time, it works. I get the y coordinate of the image called num, which is 470. In every run that follows, it stays 470, even though you can see the image move!
<p id="demo">Click the button to display the y position.</p>
<div style="position:absolute; top:450px; width:300px; height:140px; overflow:hidden; background-color:black;">
<div style="position:relative; top:20px; left:30px; width:80px; height:100px; overflow:hidden; background-color:white;">
<img id="numbers" src="numbers.png" style="position: absolute; left: 8px;">
</div>
<button id="spinButton" style="position: relative; left: 200px; width: 80px;" onclick="spin();">SPIN</button>
</div>
var num = document.getElementById("numbers");
var spn_btn = document.getElementById("spinButton");
function spin() {
//generate a random offset value divisible by 100
var newNumber = (randomNumber() * 100) + 300;
//Debug
document.getElementById("demo").innerHTML = num.y;
TweenMax.to(num, 2, {
y: -newNumber
});
}
function randomNumber() {
var rand = Math.floor(Math.random() * 10);
return rand;
}
(Uses TweetMax)
It looks like the problem is with this line:
TweenMax.to(num, 2, {y:-newNumber});
I'm not familiar with this library so I don't know if it's doing what it's supposed to. Also I don't see the image popping up on my screen anywhere. Can you expand on what the desired functionality is?
I am trying to create an infinite scroll of elements, and haven't found a plugin that was sufficiently lightweight/capable enough, so I'm trying to create my own.
So far it is working swimmingly, except for a slight jerkiness in the animation when I remove the first element and append it to the end of the parent. The example I've tossed up also has an issue where the elements lose their padding, for some reason, but that is not occurring in my actual code...
Fiddle:
http://jsfiddle.net/WtFWy/
Using the sample markup:
<section id="photos" class="bg-transparent-black">
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
</section>
#photos{
position:absolute;
bottom:1em;
width:100px;
height:225px;
padding:3px;
overflow:hidden;
white-space:nowrap;
}
#photos div{
height:100%;
width:50px;
padding:3px;
display:inline-block;
position:relative;
border:1px solid black;
}
.red{background:red;}
.blue{background:blue;}
.green{background:green;}
And JavaScript:
scrollImages = function(){
var photoArea = $('#photos');
var children = photoArea.children();
var firstChild = $(children[0])
var firstOffset=firstChild.offset();
if(document.elementLeft === false){
document.elementLeft = firstOffset.left;
}
if(document.elementWidth === false){
document.elementWidth=firstChild.outerWidth(true);
}
if(firstOffset.left < 0 && (Math.abs(firstOffset.left) > Math.abs(document.elementWidth))){
photoArea.append(firstChild);
firstChild.css('margin-left', 0 + 'px')
children = photoArea.children();
firstChild = $(children[0])
firstOffset=firstChild.offset();
document.elementLeft = firstOffset.left;
document.elementWidth=firstChild.outerWidth(true);
}else{
}
document.elementLeft -= 1;
firstChild.css('margin-left', document.elementLeft + 'px');
t = setTimeout(scrollImages, 100);
}
document.elementLeft = false;
document.elementWidth = false;
var t = setTimeout(scrollImages, 500);
$('#photos').mouseover(function(){clearTimeout(t)});
$('#photos').mouseout(function(){scrollImages()})
});
If you remove the padding: 3px from #photos the animation works properly.