CSS gallery

Project Showcase
1

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

19 Likes
2

You are truly amazing.

3

Hi fujita,

Thatā€™s cool! Are you implementing this in webview?

4

Thatā€™s amazing

5

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
6

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:)

7

Dude!

the-pursuit-of-happiness-will-smith

Amazing work.

1 Like
8

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

9

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:

10

Did you publish the code?

11

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
12

Did you mind to share the CSS code ?

13

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

2 Likes
14
3 Likes
15

Wow! Is it possible to share the CSS code?

16

More animation

4 Likes
17

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
18

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
19

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:

20

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