okkur / syna

Highly customizable open source theme for Hugo based static websites
https://syna.okkur.org/demo/
Apache License 2.0
250 stars 133 forks source link

Add support for background images and simple parallax scrolling #814

Open Rado-1 opened 4 years ago

Rado-1 commented 4 years ago

Is this a BUG REPORT or FEATURE REQUEST?: feature

What you expected to happen:

It would be nice to support the following features:

  1. To use image for background of a fragment. This would be a generic feature used for any kind of fragment; content, items, portfolio, graph, etc. Something similar to what we can in the hero fragment. The solution would be, e.g., to use asset.image for background and to specify it in a special property, e.g., asset.use_as_background.
  2. If there is a background image set for a fragment, there should be a way how to set a simple parallax scrolling effect and the ratio how fast/slow the background image is moving - from static to some percentage of scrolling the page. E.g. asset.parallax = 0 for background image not moving by vertical scrolling, asset.parallax = 50 for background image moving by 50% of scrolling, or asset.parallax = 100 (default) for background image moving with the same speed as scrolled page. Also values more than 100 could be allowed.

Example of a simple parallax scrolling effect: https://codepen.io/tribex/pen/mWNWdz

stp-ip commented 4 years ago

Sidenote: Codepen does not work with Firefox it seems.