Hi guys
Currently trying to tac on a hype file which has a parallax action by mouse action. Having some difficulties trying to implement the hype file into the blocs test page, can anyone help. Folder is attached
Many thanks
john
Blocs and Hype.zip (1.8 MB)
Hi John @stokerjohn
Would you have the original hype file ? I have checked your blocs file but the code widget appears to be empty…
MDS
Hi MDS
Many thanks for your response, apologies thought I attached it, please find on this replytest.zip (868.5 KB)
Hi John @stokerjohn
I am a bit in a hurry on another project and though I am trying I have not yet been able to get this working…
@hendon52 has been using Hype and Blocs. Thus @hendon52 could you please lend a hand to help out John ?
MDS
It would help if you could explain what the effect in Blocs is supposed to be. From what I can see at the moment, the hype file does little more than the effect that can be achieved by setting the parallax option within Blocs. I did notice that when the project is exported from Hype, there were issues reported that could affect the ability of the file operating in all browsers - something to do with non-unique element ID’s. Apart from that, all I see the file doing is causing the image to scroll in exactly the same way as a normal bloc background image would scroll. Also, can you tell me exactly what happens when you add the code to your blocs project.
Hi @hendon52, many thanks for your response. Basically this my first attempt at integrating a hype file into Blocs.
The actual file is a parallax effect cause by the cursor moving left to right /up or down. I have attached a small video for reference along with the hype file and export folder.
test.zip (3.9 MB)
Hopefully this makes it clearer. Really appreciate your time. If there are any good step by step guides for implementing this you know of then Im app you tackle this issue myself
cheers
Ok, I better understand what it is you’re trying to achieve. When I open your hype source file and then preview it in a browser. I see the effect you’re are trying to create. However, the background image appears to be missing, I only see the png image of the tree trunk. Instead of a background image, I see a faint series of background dots where the background image should be (see screenshot below - some of the dots are highlighted in red).
These dots actually move in response to the mouse pointer as indicated in your post.
Clearly, I can’t fix any issues with the hype file not showing the background image, but on the assumption that there should be one somewhere in the Hype file, I can confirm that the hype file does embed into blocs and it exhibits the same behaviour as it does in the Hype preview.
To embed any hype file, you need to export the Hype project as HTML. This will create an HTML file and a resource folder. Open the HTML file in any good plain text editor and copy first the head and paste it into your page head in Blocs. Next, copy the body code and past that into an HTML bric in your blocs project. (note, the head code isn’t alway necessary unless it calls a required script). The code pieces to copy are shown in the screenshot below.
The actual effect won’t usually be visible in blocs preview so you will have to publish the page to a disk folder. When you publish, you will have to copy the hype-generated resource folder to the same folder where you published your site. You should then be able to preview the site in a browser by simply double-clicking the index.html file.
You are an absolute start many thanks, this is indeed extremely helpful, will give it some time and keep you informed on my progress and will post a link for you to view once finished
Thanks again
@MDS Always happy to help - hopefully it will work for @stokerjohn - maybe he’ll post the result when it’s done.
Hi @hendon52 and @MDS just in case your interested i managed to create this and all is working well, again thanks for your knowledge guys. I had tried to get the html code bric to be 100% width (edge to edge)
but seem to be unable to create this.
I made the hype file scalable and exported the code in the same way as you would do if its a set size (1170 x698) but it does not seem to work or not like it, so is there a way of making the element fit width?
attached is the working file
cheers
test.zip (3.2 MB)
I would suggest that you set the Hype Scene to scale. It may be that you haven’t set this option. As a result, the stage size will be fixed at 1170. The screenshot below shows where the scale option is in the scene inspector of Hype. Just check the scale checkbox and see if that improves things.
Ah, it does seem that just copy and pasting over the top of previous code doesn’t work , so just did a clean install and voila!
Cheers
Hi again, the site is coming along nicely and the parallax works really well, as with anything i would love to improve it by having the navigation over the top of the parallax like it can do with the background image when using hero bloc. Is this something that is achievable ( I will share the link soon by the way)
cheers
Thanks for this short tutorial! I’m very grateful for your help, I started using Hype and I struggled to implement it, but you made it effortless!!
