Change = document iD softly by Javascript ... blend or fade in

Using JavaScript with Hype Function Library
1

I would like to blend a “ changer = document.getElementsByClassName ” softly. Best, with variable in seconds. I find nowhere an idea how and where I can embed this in the script. Has someone an idea for me?
Thanks Ralf

var changer = document.getElementsByClassName('abc');

for (var i=0; i<changer.length; i++)

changer[i].innerHTML = "<iframe src = http://nextgreen.design/00/2A/index.html ; style= 'position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%' ";

Intro-Fadein.hype.zip (14,9 KB)

2

Setting inner html always takes immediate effect. You’ll need to at least use two elements and change the opacity between them.

I’d probably instead just use basic Hype animations of changing the opacity of elements each with the iframe (HTML Widget) that you want. This way also has a preloading advantage, as you’ll want the contents to be all/mostly loaded before beginning the transition.

3

Thank you, Jonathan,
There is also a way to solve the fadein and fadeout in java Skript. I already have an approach, but I’m not really good at writing javascript, i have to learn more there. I keep trying again.

Now, I did it exactly as you suggested.

A
A.jpg4499×2474 323 KB

And it works fine. Take a look hear : http://www.nextgreen.design

Thank you Greetings Ralf

4

Cool, glad you got it working with your own approach.