Header, spacing, adding music

• 

  hallluke · Member · Aug 10, 2016 at 7:48 pm

  • Copy link

  If you don’t want the still:moving ratio to be 3:1, you just want to make the maths easier try splitting your 14.285714% into 10% and 4.285714%, the only effect it will have apart from slightly simplifying the sums is to make the picture stay still for slightly less time and transition to the next image for slightly longer.

• 

  hallluke · Member · Aug 10, 2016 at 7:56 pm

  • Copy link

  The easiest way to make the slider run forwards then backwards is to add the animation-direction line to the following block of code:

  div#fpslider div {
  	position:relative;
  	width:600%;
  	margin:0;
  	left:0;
  	animation:45s scrollimages infinite;
  	animation-direction: alternate;
  }

  and then in the @keyframes section include a 100% line at the end with the same left value as the previous line, so for 7 images it would be:

  @keyframes scrollimages {
  	0% {left:0}
  	...
  	...
  	...
  	100% {left:-600%}
  }

  It won’t be perfect, it’ll spend too long on the last image, but it’s way easier to do it this way than to re-do all the maths!

• 

  styellebycamiaj · Member · Aug 11, 2016 at 2:05 am

  • Copy link

  okay, I am going to have to wrap my head around the mathematics of it (NP!), thank you!

  I tried the following code and now when the slideshow gets to the last image, it goes back to the beginning, then to the last picture and then starts to slide backwards. We are almost there, just that little kink:

  div#fpslider div {
  	position:relative;
  	width:600%;
  	margin:0;
  	left:0;
  	animation:35s scrollimages infinite;
  	animation-direction: alternate;

• 

  styellebycamiaj · Member · Aug 11, 2016 at 2:09 am

  • Copy link

  Nvm, it worked! I forgot t change the last line to 100%. I assume there is no way to make it so that it doesnt stay at the last image for so long before sliding backwards?

• 

  hallluke · Member · Aug 11, 2016 at 7:07 am

  • Copy link

  It involves more maths!

  You’ll need to experiment with the percentages you set in the keyframes code. The method would be to set it up so that instead of equal splits for each image the first and last image are half as much as all the others.

  Here’s an example that should work for 6 images It actually uses the splits (15% then 5%) that we worked out before for 5 images (because we’re showing 2 images for half the time) but with the first and last image only shown for 7.5% because when it loops this gets doubled.

  It does mean the first time the first image appears it only shows for half the normal time but after that your loop should work just fine.

  @keyframes scrollimages {
  	0.000% {left:0}
  	7.500% {left:0}
  	12.50% {left:-100%}
  	27.50% {left:-100%}
  	32.50% {left:-200%}
  	47.50% {left:-200%}
  	52.50% {left:-300%}
  	67.50% {left:-300%}
  	72.50% {left:-400%}
  	87.50% {left:-400%}
  	92.50% {left:-500%}
  	100.0% {left:-500%}
  }

• 

  styellebycamiaj · Member · Aug 12, 2016 at 3:37 pm

  • Copy link

  Thank you