Grav website template different from standard antimatter

Archive
1

The font fading effect in the header image is rather nice. Do you mind sharing the necessary changes with us?

2

I use a simple animate.js file:

// Animate on scroll
$(function() {

  var $window           = $(window),
      win_height_padded = $window.height() * 1.1,
      isTouch           = Modernizr.touch;

  if (isTouch) { $('.revealOnScroll').addClass('animated'); }

  $window.on('scroll', revealOnScroll);

  function revealOnScroll() {
    var scrolled = $window.scrollTop(),
        win_height_padded = $window.height() * 1.1;

    // Show...
    $(".revealOnScroll:not(.animated)").each(function () { 
      var $this     = $(this),
          offsetTop = $this.offset().top;

      if (scrolled + win_height_padded > offsetTop) {
        if ($this.data('timeout')) {
          window.setTimeout(function(){
            $this.addClass('animated ' + $this.data('animation'));
          }, parseInt($this.data('timeout'),10));
        } else {
          $this.addClass('animated ' + $this.data('animation'));
        }
      }
    });
  }

  revealOnScroll();
});

This script looks for elements that have revealOnScroll class, and then they get animation classes toggled when they are scrolled into view. For example this is the code for the showcase:

<article>
	<div class="revealOnScroll" data-animation="fadeInDown" data-timeout="300">
	{{ content }}
	</div>    
</article>

This also requires the animate.css file for the actual animation process as provided by:

http://daneden.github.io/animate.css/

3

Thanks for sharing this :slight_smile:

Sadly enough I couln’t make it work:

css and js seems to be loaded properly:

Can you explain where to put these lines inside showcase.html.twig (I support this IS the right file to edit?)

{{ content }}
4

Ok well the GetGrav.org homepage is using a layout very similar to the “OnePage Skeleton”. So it’s using Modular content, and the first item of that page is using the ShowCase modular page type, so that is why I showed you the example from modular/showcase.html.twig. The important part is the class and the data-animation and data-timeout. You can put those on any HTML element and it should work.

5

Well I changed the showcase twig template, but now I’ve got a text animation when (re)loading the page - like fade in of the text. But what I wanted was the fade/in out animation when scrolling the page up or down, which doesn’t seem to work that way.
Any idea?

6

as the showcase is visible on load, it animates in. If you put the same HTML elements on another section of the page ‘below the fold’, it would animate when scrolled into.

7

I’m afraid I’m really at a loss here. This is what I have so far.

{% set showcase_image = page.media.images|first.grayscale().contrast(20).brightness(-125).colo rize(-35,81,122) %}
{% if showcase_image %}
	<div class="modular-row showcase flush-top" style="background-image: url({{ showcase_image.url }});">
{% else %}
<div class="modular-row showcase ">
{% endif %}

	<article>
		<div class="revealOnScroll" data-animation="fadeOut" data-timeout="300">
			{{ content }}
		</div>

    {% for button in page.header.buttons %}
        <a class="button{% if button.primary %} primary{% endif %}" href="{{ button.url }}">{{ button.text }}</a>
    {% endfor %}

	</article>

</div> 
---
8

Do you have a URL i can use to look at it live?

9

Here you go… I created some test installation for you: core42.com

10

Change the animation to ‘fadeIn’ rather than ‘fadeOut’

11

Yeah, but how do I make the text fadeOut while scrolling like on the Grav Homepage?

12

Ah that bit! I forgot that fade out bit is handled with JavaScript also:

jQuery(window).on('load', function(){
	// Showcase Scroll Fade
	scrollFade($('.showcase > article')
		, 0.5  // Friction (0 ~ 1): lower = none
 		, 0    // Fade duration (0 ~ 1): lower = longer
	);
})

// SHOWCASE SCROLL FUNCTION
var $window = $(window);
var scrollFade = function ($element, friction, offset) {
	friction  = (friction  === undefined)? 0.5 : friction;
	offset = (offset === undefined)? 0 : offset;

	var parentHeight = $element.parent().outerHeight() * 0.5;
	var previousOpacity = Infinity;
 
	$window.scroll(function() {
		var scrollTop = Math.max(0, $window.scrollTop())
		, yOffset   = scrollTop * friction
		, opacity   = 1 - (scrollTop / parentHeight - (parentHeight * offset))

		if (opacity < 0 && previousOpacity < 0) return;

		$element.css({
			transform: 'translate3d(0px,'+ yOffset +'px, 0)',
			opacity: opacity
		});

		previousOpacity = opacity;
	});
}
13

Ah, now I got it to work propery. Thanks so far.
Now I have a second problem: I used the showcase template a second time further below, but there no text is displayed at all. Any idea how to solve this?

14

Do you have content set in the second instance of the showcase module? By this I mean markdown that is in the .md file below the header?

15

Yeah. Content is defined.

The first animation is always done when loading the page. Then the second function fades the text in and out properly when scrolling the contents.

For now I simply created a second template without the RevealOnScroll / Article sections. That works of course but it would be interesting finding a possibility to have another fadeIn effect when scrolling to the second showcase part. When changing your first js routine from

$window.on(‘scroll’, revealOnScroll);

to

$window.on(‘load’, revealOnScroll);

this doesn’t seem to make any difference at all.

16

I’ve updated my sample site so you can see the problem. The second showcase while also still invisible should also ‘appear’ on scroll in some way.