web story sobre web stories

[{"selector":"#anim-b3065b9c-8004-416b-8e90-47a2c44f3a15","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-38513c58-348e-4c55-98c3-cdc2fc33e0ae","keyframes":{"transform":["translate3d(0px, -98.72101%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1338f745-d5d4-4b9a-a73e-247f38ca268b","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-5b769926-8c7b-40af-b9be-76b1fab760bb","keyframes":{"transform":["translate3d(-100%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2f738600-cccb-4b4a-afb6-f45546ab0b02","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-068816e6-c777-4837-a6ec-a11c6b1652e8","keyframes":{"transform":["translate3d(-113.22315%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9b2ea241-5589-47a7-a1d3-400a3e4f7b34 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(0, -5.488113032887917%, 0)","translate3d(0, 0%, 0)"]},"delay":0,"duration":1000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-a2617905-f8bd-4ee2-ae1d-4d12e17ed801","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-db2cdaa0-b141-4aa6-9fcf-daddbb98ab3c","keyframes":{"transform":["translate3d(0px, 196.19481%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Você está lendo uma web story. Este formato está dentro do #site612. Mas o que exatamente é esse formato e para quê usamos?

[{"selector":"#anim-30044761-065f-435b-8ae4-c962a3ece683","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-3344f01e-b125-4816-a5d2-1dcefa6b0565","keyframes":{"transform":["translate3d(0px, -99.62962%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7936e41d-4c33-4420-addc-ea63261f6302","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-aae465cd-f8e6-4140-8ef8-ffe266ec27b2","keyframes":{"transform":["translate3d(-115.68628%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Imagine as stories do Instagram. É tipo isso, com a diferença que as web stories são permanentes

[{"selector":"#anim-74d72623-a548-42a9-ba28-b93350730691 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(-31.249999886225726%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":1000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-7280ac62-9d9e-4d62-adfd-70576f68105c","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-14f7cae7-bbd7-4b0b-98bd-be1551088cb9","keyframes":{"transform":["translate3d(130.10753%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d20d5e4c-7f53-414f-9b43-aa2ed8b776fe","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-69ad6848-8830-4a4a-9af2-66179180d70f","keyframes":{"transform":["translate3d(-100%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Este formato foi lançado em outubro pelo Google, sendo uma evolução do AMP - Accelerated Mobile Pages.

[{"selector":"#anim-45432f98-2e54-4f34-824f-01bf75269d18","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-063f0cfa-6bcb-4afe-88bc-a87b62d09c1b","keyframes":{"transform":["translate3d(0px, -99.75779%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-285e0de5-b75a-4e11-88a5-724dc4e6b897","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-34ff73cc-1ca6-4706-8547-b7bde91e6ccd","keyframes":{"transform":["translate3d(-165.65219%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Os nossos sites já usam desde então. E onde aplicamos, foi sucesso.

[{"selector":"#anim-bd2e8373-bf3b-4858-8265-114eee32121f","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2fc3af98-e295-40e6-94a1-72f421227fd6","keyframes":{"transform":["translate3d(0px, 100.38678%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-30e8e664-7def-4f6a-9865-e21c7ce46c6b","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-6af542b9-9837-44d7-83bd-84db6ae15108","keyframes":{"transform":["translate3d(0px, -191.68533%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Aqui na agência, o Blog Josivandro Avelar foi o primeiro a usar, ainda em setembro, antes do lançamento.

[{"selector":"#anim-030f0bbd-1134-4a48-bf67-832ec731a18a","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-3c699ffe-36e9-4a6d-a446-dfe671963e25","keyframes":{"transform":["translate3d(-100%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-6912ef39-366a-416a-be9e-e5f5132265e2","keyframes":{"transform":["rotate(-342deg) translate3d(-139.71632%, 0px, 0) rotate(342deg)","rotate(-342deg) translate3d(0px, 0px, 0) rotate(342deg)"]},"delay":0,"duration":870,"easing":"cubic-bezier(.2, 0, .8, 1)","fill":"both"}] [{"selector":"#anim-b96f6ebb-f3c7-407c-aa4e-5bccccf1f8a2","keyframes":[{"transform":"rotate(-342deg) rotateZ(-180deg) rotate(342deg)"},{"transform":"rotate(-342deg) rotateZ(0deg) rotate(342deg)"}],"delay":0,"duration":1000,"easing":"cubic-bezier(.2, 0, .5, 1)","fill":"forwards"}] [{"selector":"#anim-7726045d-459f-480c-9f15-41a53e338a28","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-36aec71e-86da-4021-8713-a8d6e507771c","keyframes":{"transform":["translate3d(0px, -148.73019%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Em dezembro, os números foram excelentes. Adotamos no Ônibus Paraibanos. Deu certo também!

[{"selector":"#anim-cae1efd9-7b27-4948-be4e-c92a5ba35bd8","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-74a02f36-d994-40e5-862f-5def69c2d65d","keyframes":{"transform":["translate3d(0px, -135.16611%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-aa478ee2-f211-4f1b-b9b4-b6a9f9b9dfef","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-31841eed-8e59-474b-a678-6d8217d78144","keyframes":{"transform":["translate3d(100.00000%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-533c5aea-81a9-49e0-9953-dbec9f569bf8","keyframes":{"transform":["rotate(-18deg) translate3d(138.76813%, 0px, 0) rotate(18deg)","rotate(-18deg) translate3d(0px, 0px, 0) rotate(18deg)"]},"delay":0,"duration":870,"easing":"cubic-bezier(.2, 0, .8, 1)","fill":"both"}] [{"selector":"#anim-a2cb3989-f9c3-414e-bd10-d132698c9912","keyframes":[{"transform":"rotate(-18deg) rotateZ(180deg) rotate(18deg)"},{"transform":"rotate(-18deg) rotateZ(0deg) rotate(18deg)"}],"delay":0,"duration":1000,"easing":"cubic-bezier(.2, 0, .5, 1)","fill":"forwards"}]

A 612 Comunicação se especializou em criar sites que contam histórias. Foi assim que fizemos o Blog Josivandro Avelar, o Ônibus Paraibanos, O UNIBUS RN, o OCD Holding...

[{"selector":"#anim-02adaba5-2057-4b03-99ec-c57c0e4d6618","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a728aaab-d6c3-466f-95c5-ea6978e4307e","keyframes":{"transform":["translate3d(-91.03586%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-25e43220-250f-42ba-8697-917e552a7caf","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1b03f95d-5d57-4bb7-ab57-8cac2b190f9f","keyframes":{"transform":["translate3d(0px, -119.38132%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

E a nossa preocupação não é apenas um site bonito, mas também funcional. Por isso os sites possuem AMP, Facebook Instant Articles, recursos de acessibilidade... ...E agora web stories!

[{"selector":"#anim-798e2858-6ca8-4637-90d2-53f0f59d79fd","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-4239f33a-c4a4-4586-9ecb-88b69181a4e5","keyframes":{"transform":["translate3d(-100%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7d092e51-daf6-46dd-844b-ab078c07862e","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-dcda33cb-c1b4-429b-8b7c-4e502f56dbc4","keyframes":{"transform":["translate3d(94.45783%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ccd29cde-2775-4475-a0a4-08b640b2e889","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2ab9c947-8914-43dd-a78e-50872e4e5f82","keyframes":{"transform":["translate3d(0px, -150.08891%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

conteúdo blog redação

[{"selector":"#anim-2a7182b5-ccfb-484e-8d0c-abbcdb083880","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-3942b241-f663-4306-a57a-cde9b332d34c","keyframes":{"transform":["translate3d(0px, -99.65345%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-3ad207ef-4eb7-4a0e-a508-3e68daf6560e","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-47a7ca9e-ceb5-4829-8ad8-3d3733cf021f","keyframes":{"transform":["translate3d(100.00000%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9734bf0e-7b65-4340-a2c9-228b5254287c","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-86d6cf6e-7398-49e8-89a9-800b657eb6af","keyframes":{"transform":["translate3d(-159.68992%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f8433a5e-2b2b-4506-85a3-7a91e7c5628a","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b6c877f0-04a9-4500-8da3-ed6fdd383097","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-17aa68c8-4473-4353-8b0a-2f16b19ff4c2","keyframes":{"transform":["translate3d(110.26787%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-5646fcf5-d2ce-4770-85f2-012470fdda40","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-cbee6b58-65d8-43d3-bae2-a1af48bc3727","keyframes":{"transform":["translate3d(0px, -679.43637%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e0cc476a-d410-492b-91d3-a31adc3fb027 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(-31.249999886225726%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":1000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}]

web story sobre web stories