The only bit of JavaScript is used to kick off the animations. I could have done this is CSS too, but ran out of time.
The way it works is there's a 500px square div containing a triangular -webkit-mask-image (defined by the SVG file). This mask image ensures that regardless of the size and position of the background image, you only ever see a triangular shaped section. You can think of it as a 'cutout'.
This div is duplicated, flipped and rotated eight times to create the effect. We then animate the resulting 'scope by simply moving the position of the background image.
I think it's quite neat. Unfortunately this fairly simple page actually crashes iPad and iPhone devices running (at least) 5.1.1 after a while. Very frustrating!
Nice post
ReplyDeleteaws training in chennai
htm code example codes for webdesigners
ReplyDeleteLi tag list-style-type none display inline html code
An astounding web diary I visit this blog, it's inconceivably magnificent. Strangely, in this current blog's substance made point of fact and sensible. The substance of information is instructive.
ReplyDeleteOracle Fusion Financials Online Training
Oracle Fusion HCM Online Training
Oracle Fusion SCM Online Training
thank you so much for this useful message
ReplyDeletebest python training in chennai
best python training in sholinganallur
best python training institute in omr
python training in omr
selenium training in chennai
best hadoop training in chennai
best devops training in chennai
Conduct a HIPAA audit to ensure that you meet the HIPAA compliance. If you can afford, get a third party to evaluate your compliance manual and program. Get a HIPAA Compliance Certification to validate your efforts
ReplyDeleteProfessional Certification Training for HIPAA Privacy Officer
"Impressive work on building a kaleidoscope using almost pure code! It's amazing to see such creativity and technical skill in action. Thanks for sharing!"
ReplyDeleteData science Courses in Canada