0
Welcome Guest! Login
0 items Join Now

SOLVED Fade in an entire page

    • Houston's Avatar
    • Houston
    • Elite Rocketeer
    • Posts: 1077
    • Thanks: 2

    SOLVED Fade in an entire page

    Posted 11 years 9 months ago
    • I am looking for a script or plugin that will allow me to do what this website has done. I need to put some words on a black page for a few seconds then fade the actual web page in.
      seymourprojects.com/

      Any ideas?

      Many thanks,
      Houston
    • Last Edit: 11 years 9 months ago by Houston.
    • Houston Brown - www.splitlightdesigns.com
      Apache Version = 2.2.2 / PHP Version = 5.2.17 or 5.3.15 (dual)
      mySQL Version = 5.5.21
      Joomla Version = 2.5.8 / Web Servers OS Version = CentOS 6
    • Gene Page's Avatar
    • Gene Page
    • Hero Rocketeer
    • Posts: 289
    • Thanks: 0

    Re: SOLVED Fade in an entire page

    Posted 11 years 9 months ago
    • Houston's Avatar
    • Houston
    • Elite Rocketeer
    • Posts: 1077
    • Thanks: 2

    Re: SOLVED Fade in an entire page

    Posted 11 years 9 months ago
    • Looks perfect only I have to purchase "Entrepreneur" first before I can get it and I am not even sure what that is or how much it costs. The site has more Lorum Ipsum than anything. Weird.
    • Houston Brown - www.splitlightdesigns.com
      Apache Version = 2.2.2 / PHP Version = 5.2.17 or 5.3.15 (dual)
      mySQL Version = 5.5.21
      Joomla Version = 2.5.8 / Web Servers OS Version = CentOS 6
    • Gene Page's Avatar
    • Gene Page
    • Hero Rocketeer
    • Posts: 289
    • Thanks: 0

    Re: SOLVED Fade in an entire page

    Posted 11 years 9 months ago
    • Henning's Avatar
    • Henning
    • Preeminent Rocketeer
    • Posts: 29362
    • Thanks: 954
    • Volunteer

    Re: SOLVED Fade in an entire page

    Posted 11 years 9 months ago
    • Houston's Avatar
    • Houston
    • Elite Rocketeer
    • Posts: 1077
    • Thanks: 2

    Re: SOLVED Fade in an entire page

    Posted 11 years 9 months ago
    • No, that's just the demo...

      You can get it here for $5

      www.pixelpointcreative.com/exten ... oader.html

      I purchased it but it does not offer a fade for a transition, only animated effects and I do not like the loading bar. That is really pointless and I do not see where you can turn this off.

      Really appreciate the suggestion thought. Perhaps I can use this somewhere else.

      Many thanks,
      Houston
    • Houston Brown - www.splitlightdesigns.com
      Apache Version = 2.2.2 / PHP Version = 5.2.17 or 5.3.15 (dual)
      mySQL Version = 5.5.21
      Joomla Version = 2.5.8 / Web Servers OS Version = CentOS 6
    • Houston's Avatar
    • Houston
    • Elite Rocketeer
    • Posts: 1077
    • Thanks: 2

    Re: SOLVED Fade in an entire page

    Posted 11 years 9 months ago
    • you could try

      seanmonstar.com/post/707205823/f ... y-elements

      Not exactly sure how to implement this Mr. Henning. :(
    • Houston Brown - www.splitlightdesigns.com
      Apache Version = 2.2.2 / PHP Version = 5.2.17 or 5.3.15 (dual)
      mySQL Version = 5.5.21
      Joomla Version = 2.5.8 / Web Servers OS Version = CentOS 6
    • Henning's Avatar
    • Henning
    • Preeminent Rocketeer
    • Posts: 29362
    • Thanks: 954
    • Volunteer

    Re: SOLVED Fade in an entire page

    Posted 11 years 9 months ago
    • Houston you need to be a bit more adventurous ;-)

      so just to show the concept:

      open the index.php of your template and add this code right after the body tag
      <div id="killme">Please fade!</div>

      in the head tag add
      <? $gantry->addScript('fadeanddestroy.js'); ?>

      to your css add
      div#killme {
          position: absolute;top: 0;bottom: 0;left: 0; right: 0;;
          z-index: 99999;background: red;
      }

      in the js folder of your template ad a file called fadeanddestroy.js with this code:
      Element.implement({
      fadeAndDestroy: function(duration) {
          duration = duration || 3000;
          var el = this;
          this.set('tween', {
              duration: duration
          }).fade('out').get('tween').chain(function() {
              el.dispose();
          });
      }});
       
      window.addEvent('domready',function() {
      $('killme').fadeAndDestroy();});
    • Henning's Avatar
    • Henning
    • Preeminent Rocketeer
    • Posts: 29362
    • Thanks: 954
    • Volunteer

    Re: SOLVED Fade in an entire page

    Posted 11 years 9 months ago
    • of course it makes sense to use a condition to load code only for one menu item ...

      <?php $itemid = JRequest::getInt('Itemid', NULL); ?>
      <?php if ($itemid == 101) : ?>
      <!-- some code -->
      <?php endif; ?>

      $itemid == 101 is the id of the menu-item ...

      The rest is up to you ...
    • Houston's Avatar
    • Houston
    • Elite Rocketeer
    • Posts: 1077
    • Thanks: 2

    Re: SOLVED Fade in an entire page

    Posted 11 years 9 months ago
    • Yes, I not only need to be more adventurous I need to learn more about basic coding outside of html and css.

      That worked beautifully. Thank you.
      One other quick question, what would I need to do to get the "intro" to stay a little longer on the page before the fade starts? I see that there is a number to control how long the fade takes but not for how long it stays on the screen before it starts.

      Many thanks,
      Houston
    • Houston Brown - www.splitlightdesigns.com
      Apache Version = 2.2.2 / PHP Version = 5.2.17 or 5.3.15 (dual)
      mySQL Version = 5.5.21
      Joomla Version = 2.5.8 / Web Servers OS Version = CentOS 6

Time to create page: 0.052 seconds