CSS gallery

CSS gallery 2021/03/02
There is no need to split the original image into parts.

17 Likes

You are truly amazing.

Hi fujita,

That’s cool! Are you implementing this in webview?

That’s amazing

Thank you @mrnmkmn

This is not an external web page.
★ This animation is designed with CSS.
★ The html and css code is written in the rich text component in glide-app.

1 Like

Thank you for your reply. It’s great.

I’ve used inline CSS with rich text before, but I was surprised that this was possible. I’m sure we can do many more animations.

Thanks:)

Dude!

the-pursuit-of-happiness-will-smith

Amazing work.

1 Like

Hey !

That looks great! Quick question, do you think it’s possible to have an animation as soon as the user logs in for the first time without having to click on a button except the login button ? That’ll be great

How did you do to when I click in Things tab, it sets directly to the code if we can’t put actions in tabs? :thinking:

Did you publish the code?

Thank you @Carlos_DeSilva

@AymenM @Lucas_Pires
There is no need to trigger the start of animation.
The animation starts to move on the screen display itself.
In other words, on Glide, if you put the code on the screen that is displayed first, the animation will start automatically as soon as the application opens.
You can also use it as a trigger by setting Visibility with checkboxes, buttons, or custom actions.

@mrt224
The current code is very complex and cluttered. It may be cleaned and published after a little more verification.

4 Likes

Did you mind to share the CSS code ?

https://ritual.glideapp.io/ by @Lucas_Pires . A lot of cool stuff

2 Likes
3 Likes

Wow! Is it possible to share the CSS code?

More animation

3 Likes

nice website @Wiz.Wazeer , but scrolling and transitions are way too fast… making it impossible to read content… check your settings.
Did you make this web from scratch or use a third-party service? even if the speed is annoying and confusing, I’m very impressed.

1 Like

Thank you @Uzo. will check transition settings. Mixture of both. But, guys it wasn’t meant to be a presentation of my site animations. Site is quite old now. It was meant to be a showcase of crescent moon css animation. I got the animation just about right but still trying to perfect the moon :rofl:.

2 Likes

Hi, Wiz :slightly_smiling_face: I did not understand how it works at 1st :grin: (several trials) as I didn’t see the tab icons with my default browser menu on. I could not go further than the “Moon” screen.
I find a bit strange the floating to lead to your website, not sure that’s what people expects: I thought it was to enter, not go elsewhere.

Are the opening/sliding cards gifs or CSS?

I’d like to know how you slide your card to the left. I’m trying to slide a door with a similar animation without gif.

It’s strange for me to click on the green text to enter, while seeing the button that is pressed and nothing happens when you target that big button.

Anyway, the web site looks so cool and refreshing. Wow. Eye candy :lollipop:

Thank you. I’m not using any giff; All pure html/css animation. I have 3 different animations. I replaced moon with UFO experience. The floating ship adopts the colour of its background depending on which colour it settles on (except one, which was designed to serve as a clue to another colour on the app, leading to a different world). You can get your Animations to work in Glide, but you have to be careful about (and be ready compromise on) expectations. Thank you.

1 Like