Blog Post
AdamZamczyk
8 months agoCommunity Member
This week, I want to share the example I prepared in 'cooperation' with ChatGPT.
This is a magnifying glass effect, combined with the Tilt.js function, that gives a more dynamic view of the main image.
2 main ways to control the zoom factor - up/down key arrows or a slider.
Additionally, the whole scene gets darker when the Magnifying glass effect is turned on - it follows the mouse movement.
I added an animated toggle and new emphasis animations to the Zoom factor as a small cherry on top.
Enjoy: https://magnify.zamczyk.co.uk/
Side note: the Javascript has 162 lines of code to achieve this magnifying glass effect. Thanks again ChatGPT.
Update; here is the .story file, enjoy.
https://drive.google.com/file/d/1jCBBFB3Jy42HV3oF3sGyHw4xejMLZUY6/view?usp=sharing
This is a magnifying glass effect, combined with the Tilt.js function, that gives a more dynamic view of the main image.
2 main ways to control the zoom factor - up/down key arrows or a slider.
Additionally, the whole scene gets darker when the Magnifying glass effect is turned on - it follows the mouse movement.
I added an animated toggle and new emphasis animations to the Zoom factor as a small cherry on top.
Enjoy: https://magnify.zamczyk.co.uk/
Side note: the Javascript has 162 lines of code to achieve this magnifying glass effect. Thanks again ChatGPT.
Update; here is the .story file, enjoy.
https://drive.google.com/file/d/1jCBBFB3Jy42HV3oF3sGyHw4xejMLZUY6/view?usp=sharing
- JodiSansone8 months agoCommunity MemberThis has so much to explore. Thanks for posting it. Would you be open to posting the file so we can see how you achieved the different effects?
- AdamZamczyk8 months agoCommunity Memberhi Jodi, here is the file, enjoy
https://drive.google.com/file/d/1jCBBFB3Jy42HV3oF3sGyHw4xejMLZUY6/view?usp=sharing
- ThierryEMMANUEL8 months agoCommunity MemberVery interesting and beautiful indeed, Adam. As Jodi said, the first thing I'll do if I can study the file.story is figure out how to enlarge the magnifying glass a little bit. It gives me lots of ideas.
- AdamZamczyk8 months agoCommunity Memberhi, Thierry, and thanks for your kind words. Here is the file
https://drive.google.com/file/d/1jCBBFB3Jy42HV3oF3sGyHw4xejMLZUY6/view?usp=sharing
There are some options in the code to change the image, size etc so enjoy.- IrisSchlabitz7 months agoCommunity MemberHi Adam,
this is impressive, thank you for sharing. I downloaded your file to learn, especially the use of Java. However the storyfile that you so kindly shared does not work the way it was published by you. What do I do wrong?
- AlexanderSalas8 months agoCommunity MemberOne of the best uses of Js I've seen in a while. Great job!
- AdamZamczyk8 months agoCommunity MemberThanks Alexander, I'm doing my best learning Javascript, ChatGPT is a great companion on this learning journey
- DanaDutiel8 months agoCommunity MemberMy original idea for this challenge was to create a course about Mt. Everest. This would be great for that topic. Thank you for the inspiration. But, I don't know JS, so mine will be slightly different :)
- Ange8 months agoCommunity MemberI really enjoyed that, what a great interaction.
- IvonneMartin-b88 months agoCommunity MemberThis challenge submission is pretty epic. I definitely need to dive in and learn more about how you were able to achieve these effects. Thanks for sharing, Cheers!
- PerryBennett-126 months agoCommunity MemberWow, this is amazing, thank you for sharing! I would love to figure out how the mouse cursor can still click on the hotspots on the image while in magnifying mode. ChatGPT has been helpful for me in learning coding techniques as well.