Photoshop Question posted in
The official user guide can be found here.

Jquery Delay and more – Photoshop

i [have/want] to make a Storytelling Website like:

http://www.bizbrain.org/coffee/

1) Would you guys creat every Object in CSS or would you do it Frame by Frame in Photoshop?

2) Why doesnt the Delay work? (Yes i tested a Higher delay aswell like 5000)(Code Below the Line)

3) How do i bind the stylesheet.css File if i move it to the miscstyle Folder?
I tried:

<link rel="stylesheet" href="miscstylestylesheet.css">
<link rel="stylesheet" href=".miscstylestylesheet.css">
<link rel="stylesheet" href=".miscstylestylesheet.css">

<link rel="stylesheet" href="/misc/style/stylesheet.css">
<link rel="stylesheet" href="./misc/style/stylesheet.css">
<link rel="stylesheet" href=".misc/style/stylesheet.css">

_________________________________________________________________________________ 
^the Line 

test.js

$(document).ready(function(){ 
	var n = 1;	
	for(i = 1; i < 30; i++){
		changePicture();
	}
	function changePicture(){
		n+=1;
		$('.p').delay(33).css('background-image', 'url("misc/bilder/'+n+'.png")');		
	}	
});

stylesheet.css

* {
	margin: 0;
	padding: 0;
	border: 0;
	height: 1000%;
}
.p{
	height: 100%;
    width: 100%;
	position:relative;
	padding: 25%;
	background-size:cover;
	background-attachment:fixed;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	transition: all 0.2s ease;
	background-image: url("misc/bilder/1.png");    
}

index.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="miscstylestylesheet.css">
<title>Evolution des Menschen</title>
</head>
<body>
	<div class="p"></div>	
<script type="text/javascript" src="misc/js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="misc/js/test.js"></script>
</body>
</html>

As you can tell from the Code i have no Webdesign experience
Thanks in advance

Tags:

2

Answers


  1. 0

    1) CSS for sure. Frame by frame is not HTML5. Is just a video… With CSS you have control of every object, and you can move them in multiple ways with conditionals depending on device width, other element positions, mouse positions and whatever.

    2) Because css() in jQuery is not animated dependant. It just gets applied instantly to the object that is called. To css() work with delay() check this answer: Using jQuery delay() with css()

    3) You have to remove the starting dot. Check the address of your your test.js file under your index.html. Do the same with your stylesheet.css.

    Login or Signup to reply.
  2. 0 
    $(document).ready(function(){ 
  var delay = 33;
  changePicture(1, 30, 'misc/bilder', '.png')

  function changePicture(next, last, path, extension){
    if (next <= last){
      setTimeout(function(){
        $('.p').css('background-image', 'url("' + path + '/' + next + extension + '")');
        next += 1;
        changePicture(next, last, path, extension)
      }, delay);
    }   
  }
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search