Member Avatar for CodyOebel

2 things needed.

1. Ok the customer wants a splash page to play an animation for about 3 seconds, and then load to the home page. I have access to an Adobe CS 6 suite at my work ;). Which tools would easily help me with this?

2. Also I want to create a scrolling animated selection of products. E.g One picture of an audio speaker displays, then 3 seconds later a home Tv displays. If you click on the Tv it takes you to a link for info on the tv, if you click the speaker it takes you to info on the speaker etc.. Can someone point me in the right direction for doing this please.

I appreciate any help and assistance provided. I know time you spend to help me greater my knowledge and experience is time in your life you will never get back. From human to human I really appreciate it. Thank you!

  • 2 Contributors
  • 4 Replies
  • 126 Views
  • 16 Hours Discussion Span
  • Latest Post Latest Post by Member #949455

Dani AI

Generated

For — two practical, modern approaches that sidestep the old Flash-heavy workflow mentioned, while keeping things accessible, crawlable and mobile-friendly.

A timed intro: keep it as a non-blocking overlay that users can skip and that removes itself after a short interval. Make the animation a progressive asset (SVG, CSS animation, Lottie JSON) so it’s lightweight. Provide a visible “Enter”/“Skip” link and restore focus to the page when the overlay closes. Example pattern:

<div id="splash" aria-hidden="false">
  <div class="splash-animation">/* SVG/Lottie here */</div>
  <a href="/home" id="skip">Enter site</a>
</div>

<script>
var duration = 3000; // ms - change as needed
var timer = setTimeout(hideSplash, duration);
function hideSplash(){
  var s = document.getElementById('splash');
  s.setAttribute('aria-hidden','true');
  s.style.display = 'none';
  var first = document.querySelector('main a, main button');
  if(first) first.focus();
}
document.getElementById('skip').addEventListener('click', function(e){
  clearTimeout(timer); hideSplash();
});
</script>

A clickable product scroller: mark up each slide as a real link so clicks, taps and crawlers work without JavaScript. Auto-advance with JS, but pause on hover/focus and honor the user’s reduced-motion preference. Minimal pattern:

<ul class="carousel">
  <li class="slide"><a href="/product/speaker"><img src="speaker.jpg" alt="Speaker"></a></li>
  <li class="slide"><a href="/product/tv"><img src="tv.jpg" alt="TV"></a></li>
</ul>

<script>
var slides = document.querySelectorAll('.carousel .slide'), i=0;
function show(n){ slides.forEach(s=>s.classList.remove('active')); slides[n].classList.add('active'); }
var auto = setInterval(()=>{ i=(i+1)%slides.length; show(i); },4000);
</script>

Notes and cautions: always include a skip control, avoid autoplaying audio, optimize images for mobile, and respect prefers-reduced-motion. If accessibility guidance is needed, see the ARIA carousel example and the JS timer reference: WAI-ARIA carousel example and MDN setTimeout.

Recommended Answers

All 4 Replies

Member Avatar for CodyOebel

Bump

Member Avatar for Member #949455

Ok the customer wants a splash page to play an animation for about 3 seconds, and then load to the home page. I have access to an Adobe CS 6 suite at my work ;). Which tools would easily help me with this?

Adobe CS6. I have Adobe CS5.5

Also I want to create a scrolling animated selection of products. E.g One picture of an audio speaker displays, then 3 seconds later a home Tv displays. If you click on the Tv it takes you to a link for info on the tv, if you click the speaker it takes you to info on the speaker etc.. Can someone point me in the right direction for doing this please.

You need create a few layers and alot of frames in order to make it work.

Member Avatar for CodyOebel

Ok I know how to make animations such as .GIFS . Ive been more a linux and GIMP user, but trying to go the industry standard route for once. Remember I dont just want to hyperlink an animated gif.. thats easy. .. I want each and every single picture that the animation changes to become a seperate link.

Member Avatar for Member #949455

Remember I dont just want to hyperlink an animated gif.. thats easy. .. I want each and every single picture that the animation changes to become a seperate link.

What you talking about? You ask if Adobe CS6 a better option to create a animation. Which I say Yes. When creating flash animation it's in swf not gif. You can create gif in animation template and export it out in gif but that's not what you ask in the preivous post.

Ok I know how to make animations such as .GIFS . Ive been more a linux and GIMP user, but trying to go the industry standard route for once. Remember I dont just want to hyperlink an animated gif.. thats easy. .. I want each and every single picture that the animation changes to become a seperate link.

You need to used ActionScript 2 or 3 to create a hyperlink. Meaning you need to create a layer for each picture. Then by each frame is how you separate the animation into separate link. Another words you need a script to make sure each link is separated.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.