In the following tutorial I will demonstrate how to add Hype as your landing page to wordpress: And this is the CSS code that you will need to add: .fullScreen{ position:fixed; top:0; left:0; z-index:99; } .main_title, #sidebar{ display:none; }
Creating a parallax background effect for your scenes in Hype is not hard. In the following video you can see how it works: var objects = document.getElementsByClassName("mouseParallax"); function map(value, low1, high1, low2, high2){ return low2 + (value – … Read more…
In the following video I demonstrate how we can have a timeline played back, as soon as a specific element scrolls into view: $(".scroll").scroll(function() { playIfVisible("highlight"); }); function playIfVisible(name){ var posY = document.getElementById(name).getBoundingClientRect().top; var winH = $(window).height(); … Read more…
In the following video I show how you can create simple hover effects in Hype:
Here is a short tutorial on how to add blend modes in Hype: var modes = ["normal","multiply","screen","overlay","darken","lighten","color-dodge","color-burn","hard-light","soft-light","difference","exclusion","hue","saturation","color","luminosity"]; for(var a = 0; a < modes.length; a++){ var mode = modes[a]; var modeClass = "blend_"+mode; var elem = document.getElementsByClassName(modeClass); for(var i … Read more…
In the following videos I am demonstrating how pages build with wordpress/divi can be linked inside of Hype. Overview: Setting up Hype: The following code will be needed for the “On Scene Load” function: var containerID = "wp_work1"; var link … Read more…
Here is a quick video showing how you can add a stroke to text (there is no sound, cause it’s soooooo simple). Below the video you can copy the code you need to enter. In the code you can change … Read more…
Linking to files (like your CV as PDF) is quite simple. Just upload the file to your server, and link it as URL on an “On Mouse Click” action in Hype. The video below explains this in a bit more … Read more…