Here’s a blog post from the Ultimatum theme developers about using parallax layers in Ultimatum. I was curious if we could use parallax backgrounds within a page/post and asked the dev’s this question. After getting an answer on my question I continued the discussion with their support via private messaging. Here’s the technique that came from this discussion.

First, following the blog post, create a div and add the class «parallax» to it.

That should look something like this:

<div class="parallax">
	...
</div>

NOTE: You don’t need to call it «parallax». You can call it whatever. You just have to use the same name in the css code. Because you will have to add the calls to the stellar java script as well for the parallax to work. Ultimatum uses Mark Dalgleish’s Stellar Java script.

So your html will loke like this:

<div class="parallax"  data-stellar-background-ratio="0.5">
	...
</div>

The number on the ratio actually defines how fast the parallax layer will move. At a value of 0.5 the parallax moves at medium speed. If you go higher the parallax will move slower. At a value of 1 the parallax layer is not moving at all. But at a value of 2.0 it will move fast. Besides that you can use all the arguments/calls listed here.

In your CSS script you can talk to the parallax layer like this

.myTopParallax {
  background-image: url("http://the-path-to-your-background-image.jpg");
  background-size: cover;
  padding-bottom: 40%;
}

The most important is to set the background image. Everything else is optional.

Ever had clients that could not decide on which font to use on their website?

here’s solution to implement choice!

Header Type 1

Header Type 2

Header Type 3

Header Type 4

Text Blocksatz

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam gravida neque dolor, a ultricies justo viverra mattis. Donec feugiat mollis orci, commodo rutrum urna molestie et. In blandit lobortis eros, at tempus lacus suscipit non. Maecenas dolor nibh, dictum vel pellentesque eu, pharetra at libero. Donec placerat fermentum magna, sit amet vestibulum dui ullamcorper in. Suspendisse nisi urna, rutrum nec arcu quis, feugiat aliquam velit. Donec molestie nisi urna, sit amet fermentum nisi blandit a. Cras tincidunt semper vulputate. Aliquam vehicula eget felis nec molestie.

Text Linksbündig

Praesent eu scelerisque est, vel volutpat nulla. Cras imperdiet enim nulla, eget pretium nibh egestas non. Cras ullamcorper, purus in varius maximus, risus massa pharetra diam, sit amet congue elit nunc a nunc. Proin lobortis elementum ante. Aenean feugiat magna vitae massa dignissim, a pharetra ex posuere. Nam ut accumsan mauris. Morbi augue nulla, rhoncus eu turpis et, ornare rhoncus tellus. Quisque metus nisi, pretium vitae tortor ac, interdum tempor quam.

Text Rechtsbündig

Text Zentriert

Lorem ipsum dolor sit amet, consectetur adipiscing elit Email

Lorem ipsum dolor sit amet Kontaktformular

This is a technique to implement a pull-down menu to test fonts on a web page

The html for the pull-down menu:

<link href='https://fonts.googleapis.com/css?family=Abel|Crimson+Text:400,400italic,600,600italic,700,700italic|Varela+Round|Patua+One|Gudea:400,400italic,700|Lora:400,400italic,700,700italic|Open+Sans+Condensed:300,300italic,700|Fjalla+One|Arvo:400,400italic,700,700italic' rel='stylesheet' type='text/css'>

<select id="input-font" class="input"  onchange="changeFont (this);">
  <option value="Times New Roman" selected ="selected">Times New Roman</option>
  <option value="Abel">Abel</option>
  <option value="Crimson Text">Crimson Text</option>
  <option value="Varela Round">Varela Round</option>
  <option value="Patua One">Patua One</option>
  <option value="Gudea">Gudea</option>
  <option value="Lora">Lora</option>
  <option value="Open Sans Condensed">Open Sans Condensed</option>
  <option value="Fjalla One">Fjalla One</option>
  <option value="Arvo">Arvo</option>
</select>

The Javascript function:

<script>
    function changeFont(font){
        document.getElementById("output-text").style.fontFamily = font.value;
    }
</script>

And the html for the content:

<h3>Lorem ipsum dolor</h3>
<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h4>
<p style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam gravida neque dolor, a ultricies justo viverra mattis. Donec feugiat mollis orci, commodo rutrum urna molestie et. In blandit lobortis eros, at tempus lacus suscipit non. Maecenas dolor nibh, dictum vel pellentesque eu, pharetra at libero. Donec placerat fermentum magna, sit amet vestibulum dui ullamcorper in. Suspendisse nisi urna, rutrum nec arcu quis, feugiat aliquam velit. Donec molestie nisi urna, sit amet fermentum nisi blandit a. Cras tincidunt semper vulputate. Aliquam vehicula eget felis nec molestie.</p>
<p style="text-align: justify;">Praesent eu scelerisque est, vel volutpat nulla. Cras imperdiet enim nulla, eget pretium nibh egestas non. Cras ullamcorper, purus in varius maximus, risus massa pharetra diam, sit amet congue elit nunc a nunc. Proin lobortis elementum ante. Aenean feugiat magna vitae massa dignissim, a pharetra ex posuere. Nam ut accumsan mauris. Morbi augue nulla, rhoncus eu turpis et, ornare rhoncus tellus. Quisque metus nisi, pretium vitae tortor ac, interdum tempor quam.</p>
<p style="text-align: left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
&nbsp;
<p style="text-align: left;"><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit <a href="mailto:alex@fullframestudios.ch">Email</a></strong></p>
<p style="text-align: left;"><strong>Lorem ipsum dolor sit amet <a href="#">Kontaktformular</a></strong></p>

Autor: Alex

Parallax with Ultimatum theme

Font Pull -Down Menu

Header Type 1

Header Type 2

Header Type 3

Header Type 4

This is a technique to implement a pull-down menu to test fonts on a web page