Highlighted

How to create hover & expand effect?

New Here ,
Jun 17, 2020

Copy link to clipboard

Copied

Hello,

 

I'm currently designing a website in Adobe Xd for a company I'm working for and they love it but want to make it an actual website.  I don't have much experience in Dreamweaver so I'd like to know if it's possible to create these effect's (see video) and how difficult it would be to do so.  The company wants to actually use the website as well, for customers to purchase items and browse so I've researching Shopify and you can edit code on there as well, so would that be better to not worry about sales transactions, inventory and all that. Any type of advice/guidance regarding this is welcome.

 

Thank you,

David 

Topics

How to

Views

71

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

How to create hover & expand effect?

New Here ,
Jun 17, 2020

Copy link to clipboard

Copied

Hello,

 

I'm currently designing a website in Adobe Xd for a company I'm working for and they love it but want to make it an actual website.  I don't have much experience in Dreamweaver so I'd like to know if it's possible to create these effect's (see video) and how difficult it would be to do so.  The company wants to actually use the website as well, for customers to purchase items and browse so I've researching Shopify and you can edit code on there as well, so would that be better to not worry about sales transactions, inventory and all that. Any type of advice/guidance regarding this is welcome.

 

Thank you,

David 

Topics

How to

Views

72

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Jun 17, 2020

Copy link to clipboard

Copied

Any of it is certainly possible, but it will require coding, and depending on if you are storing the catalog in a database vs. hard coding onto the page will dictate the complexity of your project.  If you are a designer, I would recommend having your company look into hiring an agency or a programmer who can help develop the site and effects you are looking for.  Sometimes developers may opt for javascript frameworks like vue/react to develop these types of applications and interactivity.  Also with companies like Shopify, you might not have the flexibility in the code to do what you need and you may need to consider your own hosting options, potentially tying into an ecommerce solution for the payment/compliance piece.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Jun 17, 2020

Copy link to clipboard

Copied

#1 Hover effects don't work on touch screen devices which have no mouse.  Better to use onClick event triggers instead. 

 

#2 How much client-side and server-side programming have you done?  Do you have experience with web standards and best practices for responsive web design?  Which frameworks (Bootstrap, jQuery, Vue, React, etc...) have you used.

 

#3 I prefer to use 3rd party PCI compliant shopping carts because it's less legal risk for me as a developer and safer for the merchant and customers. If something goes wrong, let the shopping cart deal with the problem. 

 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Jun 18, 2020

Copy link to clipboard

Copied

I did this proof of concept a long time ago.  The button animation is all CSS with a little jQuery code to show/hide panel content.

 

https://jsfiddle.net/NancyO/hGS2Y/

 

image.png

 

 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Resources
Learn Resources
Add a group