Topic Closed
juergen
1.5K Posts
53.7K Downloads
16 Plugins
design, web development & visual effects

Hi folks, here we go with a new plugin for betatesting:

Parallax Image 1.1b1 1.1b2 - download and examples

For gpEasy/Typesetter 4.5 and newer.
It also works with Typesetter 5.0b1 with some minor glitches.
update: should work even better with Typesetter 5.0b2

 

Any Feedback is welcome!

 

Edited: 4 years ago#8651

hoghoj1
183 Posts
HH-Support

Hi Juergen,

awesome and nice plugin, installed it and yes, it works just as you said, but it disables the mouse scroll function. I have to use the scroll bar to see the effect. AND this happens as soon as I installed it, before I inserted it.

This was tryed out on a test-website, you can see it here: http://webroynd2.dk/typesetter_461/index.php/Heading_Page

Grüß,

hoghoj1

4 years ago#8652

hoghoj1
183 Posts
HH-Support

Hi again,

tried it first with google chrome 48, mouse wheel function doesn't work, then tried it with firefox 44, everything works fine, and IE 11 also.

It looks like chrome does something to the mouse wheel function, as soon as I click once in the window, the website jumps to the top,

Grüß,

hoghoj1

4 years ago#8653

juergen
1.5K Posts
53.7K Downloads
16 Plugins
design, web development & visual effects

…it disables the mouse scroll function…

Yikes! Seems the included jquery.smoothwheel function isn't reliable in Webkit/Chrome so I'll have to flick through the web once more for better solutions.

Thanks for the heads up!

4 years ago#8654

hoghoj1
183 Posts
HH-Support

Hi again,

like your new plugin, and here is a suggestion: would it be possible to specify the size of the pictures and position (pixel from up/down/left/right)?

Grüß.

hoghoj1

4 years ago#8655

juergen
1.5K Posts
53.7K Downloads
16 Plugins
design, web development & visual effects

would it be possible to specify the size of the pictures and position (pixel from up/down/left/right)?

Well, unfortunately not. I know It would be convenient, especially for stacked layers, but let me explain why it's not so easy:

Since everything is responsive (meaning it adapts to section width and the viewport size as well), it wouldn't be possible to set dimensions and positions in pixels but only in percent. These percent values would have to be relative to the animated frame, which also needs defined dimensions to scale accordingly. So we would end up with at least 4, but mostly 6 rather abstract values for each image.
Therefore it's way easier to prepare images like I did in the stacking example, so their outer dimensions defne the animated frame and 'positioning' is done in image editing by placing the opaque/visible parts inside a large transparent image area in Photoshop, GIMP, … you name it.

There are 2 more reasons why I decided not to implement distinct dimensioning + positioning:
1st: The calculation would become more complex. Since calc is done for every animation step (~20-60 times a second, depending on the computer's speed), we should keep it as simple as possible.
2nd: We would need a separate editor canvas showing the entire animation frames to do proper sizing and positioning. Doing it WYSIWYG in-page would be difficult because - depending on the animation parameters - smaller positioned images would be invisible @ some page scrolling values because of (wanted) clipping.

So I decided to make Parallax Image simple and easy to use.
Atmittedly, It's tempting to create a somewhat more sophisticated "Parallax Animator", where we could build complex 'parallaxed' section structures similar to 'Slider Factory', but that's a whole different story ;-)

4 years ago#8656

hoghoj1
183 Posts
HH-Support

H Juergen,

can you tell me the size of the graphics, that you have used in the demo stacked parallax layers, i.e. the size of the transparent image (canvas size) and approx. the size of the image within. I have worked with PaintShop Pro since early ver. 4.0, so I know how to work with the graphics.

Grüß, 

hoghoj1

4 years ago#8658

juergen
1.5K Posts
53.7K Downloads
16 Plugins
design, web development & visual effects

The PNGs are quite big, 1600 × 1600 px. You can download them here.

But beware: If you want to upload such large images with finder to your Typesetter website, you will first have to set the "Maximum Image Area" to at least 2560000 in Configuration -> Performance. Otherwise Typesetter will scale them down which leads to somewhat large files (becuse of a nasty bug in PHP's "gd library" that fills transparent clipped areas of 32 bit PNGs with noise, making the image hardly compressable).

Another Tip: There is a fantastic online tool to optimize alpha PNGs: compresspng.com
It re-evaluates and quantizes the used colors and encodes the alpha channel in less then 8 bit - something no image editing software known to me can do. Spares you up to 50% file size.

4 years ago#8659

juergen
1.5K Posts
53.7K Downloads
16 Plugins
design, web development & visual effects
Version 1.1b2 is now available for download.
This should fix the soft-scrolling issue with Chrome/Webkit (hopefully).
4 years ago#8669

hoghoj1
183 Posts
HH-Support

Hi Juergen,

now the plugin works perfectly with Chrome also :-D

Grüß,

hoghoj1

4 years ago#8670

juergen
1.5K Posts
53.7K Downloads
16 Plugins
design, web development & visual effects

now the plugin works perfectly with Chrome also :-D

Great! Thanks for testing!

4 years ago#8671

hoghoj1
183 Posts
HH-Support

Hi Juergen,

have found an error in parallax. When I add a text item right after a parallax multiple layer, part of the text is covered by the parallax images.

Tested with 4.6.1 and Chrome 48.

See this demo at the bottom image: http://webroynd2.dk/typesetter_461/index.php/Heading_Page

Grüß,

hoghoj1 (the northern outpost :-)

4 years ago#8719

juergen
1.5K Posts
53.7K Downloads
16 Plugins
design, web development & visual effects

Hi hoghoj1

just don't apply the height (590px, in your case) to the individual Parallax Image sections but to the surrouding Wrapper Section - this should do the trick.
The Parralax Image sections will automatically adopt to the wrapper height.
 

Edited: 4 years ago#8721

hoghoj1
183 Posts
HH-Support

Hi Juergen,

and thx, now it works. Had to add attribute style. It would be nice to have it explained in detail with these new plugins, especially with these on-top images. They have to be renamed from parallax_image to something else before being placed inside the wrapper, otherwise it's very hard to place them in the right order.

But still, I like your new plugins, also the new image_marker, I'm testing that too now :-)

Grüß,

hoghoj1

4 years ago#8722

juergen
1.5K Posts
53.7K Downloads
16 Plugins
design, web development & visual effects

Had to add attribute style.

You're right, that's a bit cumbersome. Unfortunately it's currently not possible to improve it much, since we cannot have different "default content" and section parameters when defining a Section Combo.
In the current case this means that a Parallax Image section inside a predefined Wrapper/Combo context is essentially the same as a stand-alone one (which needs a defined height to work properly).

It would be nice to have it explained in detail

Building Parallax Image stacks isn't a trivial task. Recording video tutorials for that purpose comes to mind. OMG, I have to talk this with the Media Department ;-)

They have to be renamed from parallax_image

Definitely, al least here the new section labeling is quite essential. Understandably, Typesetter's in-page editing interface is not meant to deal with stacked equal (position:absolute) sections - which are anything but common. I'd say, it's fun to stack Parallax Image sections but it will not be a typical user case.


Er… Josh, in case you're reading this… just sayin'… Complete control of sections to be created via Section Combos would be *a*w*e*s*o*m*e*!
The only way to accomplish this by now, is to define several similar Section Types, which unnessesarily pollute the New Sections list if they only make sense in the context of Section Combos. Actualy it's possible to kick such items out of the regular list, but... hmmm. It's going to be a big mess this way.
edit: Solved in Typesetter 5.0

Edited: 4 years ago#8726

Topic Closed

 

News

elFinder 2.1.50 in Upcoming Release
12/28/2019

A new release for Typesetter is in the works with a lot of improvements including the ... Read More

Typesetter 5.1
8/12/2017

Typesetter 5.1 is now available for download. 5.1 includes bug fixes, UI/UX improvements, ... Read More

More News

creisi productions

Dienstleistungen von creisi productions, Luzern (Schweiz): * Konzeption, Planung und Erstellung Ihres Internet-Auftritts * Betreuung und Aktualisierung/Pflege Ihrer Website * ...

Find out more about our Provider Spotlight

Log In

  Register